This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Change the width of the boxed layout's main container

  • Creator
    Topic
  • #7050
    amberwave
    Member

    Is there a way to change the width of a single page? I am needing one page to be 100px wider (not a global change) Is there a way I change the max-width from 1000px in the CSS to 1100px but have it apply to only one page?

    I tried editing the CSS below… however it changes every page:

    #top, #featured, #main, #featured_below, #bottom, #after-footer {
    margin: 0 auto;
    max-width: 1000px;
    }

    Thank you in advance!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Author
    Replies
  • #7054
    Jason Bobich
    Keymaster

    Hello,

    When you load a page, with your inspector, checkout the <body> tag and you’ll see that WordPress gives you all kinds of classes you can use to style specific pages, which is actually very cool for styling I’ve always thought.

    So, for example, your CSS could look something like this:

    .page-id-123 #top, 
    .page-id-123 #featured, 
    .page-id-123 #main, 
    .page-id-123 #featured_below, 
    .page-id-123 #bottom, 
    .page-id-123 #after-footer {
    	width: 1000px;
    }

    Note: There’s no need to re-declare the margin: 0 auto; part because you’re not overriding it.

    #7071
    amberwave
    Member

    Perfect, thank you for the very helpful and timely response! Worked great.

    #11784
    Jason Bobich
    Keymaster

    Just to clarify, for anyone wanting to adjust the main container’s width of the boxed layout across your entire site, here’s how you’d do it:

    #top, 
    #featured, 
    #main, 
    #featured_below, 
    #bottom, 
    #after-footer {
    	width: 1000px;
    }
Viewing 3 replies - 1 through 3 (of 3 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.