• Resolved Jane Milburn

    (@jane-milburn)


    After adding the following css to make my site full width, page content is now too far to the left for some pages only. I want to keep things as they are for some pages (over to the left) but not all. I would like certain pages to be centered.
    Is this possible?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter Jane Milburn

    (@jane-milburn)

    Here is the css I used to make the site full width.
    .wrap {
    /* margin-left: auto; */
    /* margin-right: auto; */
    max-width: 100%;
    /* padding-left: 2em; */
    /* padding-right: 2em; */
    }

    @media screen and (min-width: 48em) {
    .wrap {
    max-width: 100%;
    /* padding-left: 3em; */
    /* padding-right: 3em; */
    }
    }

    .page.page-one-column:not(.twentyseventeen-front-page) #primary {
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    max-width: 100%;
    }

    @media screen and (min-width: 30em) {
    .page-one-column .panel-content .wrap
    {
    max-width: 100%;
    }
    }

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Do those pages you want centred have anything in common, like a gallery that you always want centred?

    Thread Starter Jane Milburn

    (@jane-milburn)

    Ah, yes, they are all the pages with galleries on. Primary Art, Secondary Art and the Creatives pages. I use Tiled Gallery Carousel Without JetPack.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    In the “Edit JS Code” section of the dashboard (available via https://www.ads-software.com/plugins/custom-css-js/) , try adding this:

    
    var $ = jQuery,
        gallery = $('.tiled-gallery'),
        bodyClass = 'js-page-template-gallery';
    
    if (gallery.length !== 0) {
        $('body').addClass(bodyClass);
    }
    

    Remember to set an option of “Footer” underneath the setting “Where on page”: https://ps.w.org/custom-css-js/assets/screenshot-3.jpg?rev=1770918

    Then in your Child Theme style.css file/ Additional CSS section of the dashboard add this:

    
    .js-page-template-gallery .site-main {
        max-width: 735px;
        margin: 0 auto;
    }
    
    Thread Starter Jane Milburn

    (@jane-milburn)

    Perfect, this works, I am very grateful for your help ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Center individual pages within full width’ is closed to new replies.