Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #345042

    Forgive me if this is an obvious question! I am designing a site with a full-width, responsive layout. Some of the pages, however, contain small amounts of text that I would like to present in a column that does not run full-width.

    I know I can set the max container width of the site in the General Layout, but I am wondering what the best method would be to do it on a case-by-case basis, instead of globally. Could I, for instance, use the “Custom Css Class” field to set a max width for a Color Section?

    What would be the best way to control the width of a color section or page area without globally setting the max container width? And also, keep it working well responsively? Thank you!

    #345081

    Hi tonyska!

    You can control the width on a page by page basis using CSS.

    For your about page, add the following to Quick CSS or custom.css

    .page-id-3264{
      
      width:1100px;
      margin: 0 auto;
      
    }

    “page-id-xxxx” is the unique class used for each page.

    You can find it attached with the body tag of a page on your site. Hit F12 on your browser and find the body tag and look for the class property to find the page-id-xxxx.

    Cheers!
    Arvish

    #345690

    Hi Arvish,

    Thanks for the tip, however, I am looking to keep the header, nav and slider as full-width, and control the width of the content on the page beneath that. The body class you suggested affects the entire page container, which is not what I’m looking to adjust. I am thinking custom css classes for the color sections are the way to go…what do you think? Will that work well responsively?

    Thanks again!

    Tony

    #345979

    Hey!

    Please use following code instead and adjust as needed

    #main .container { max-width: 50%; }

    Regards,
    Yigit

    #346959

    will that code make the width global? Or can I adjust it on a page-by-page basis?

    Thank you!

    #347207

    Hi!

    It will make it global but you can add page ID as following and only apply on certain pages

    .page-id-59 #main .container { max-width: 50%; }

    Chrome or Firefox to inspect elements to find page ID’s http://i.imgur.com/HyPTCRg.jpg

    Regards,
    Yigit

    #351669

    This worked! Thank you!

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘How to Control Width on Full-Width Layouts’ is closed to new replies.