-
Posts
-
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!
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!
ArvishHi 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
Hey!
Please use following code instead and adjust as needed
#main .container { max-width: 50%; }Regards,
YigitHi!
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
- The topic ‘How to Control Width on Full-Width Layouts’ is closed to new replies.