Unable to change Page width like Home

It works on your ‘Reviews’ page. Can you let us know the pages it doesn’t work on?

It doesn’t work on any page but the home page. If you make your browser full screen and visit the home page, take note of the width of the main content. Then visit any other page and you will see the main content is not as wide. I’ve changed the max-width value from the code above to 70% to help illustrate the difference.

Ah okay.

In the “Additional CSS” section of the dashboard add this:

@media screen and (min-width: 1200px) {

/* For devices with more than or equal to 1200px width
*/
    .site-content .wrap,
    .single-post:not(.has-sidebar) #primary, .page.page-one-column:not(.twentyseventeen-front-page) #primary, .archive.page-one-column:not(.has-sidebar) .page-header, .archive.page-one-column:not(.has-sidebar) #primary {

        max-width: 100%;
    }
}

https://codex.www.ads-software.com/CSS#Custom_CSS_in_WordPress

• This reply was modified 6 years, 8 months ago by Andrew Nevins.
• This reply was modified 6 years, 8 months ago by Andrew Nevins.

You need to avoid using ‘!important’. This should only be used at the absolute last resort, like if you have to override a CSS styled applied from JavaScript.

If you’ve read to use the “!important” tag somewhere on the forums, would you be able to provide me a link to that thread? I think I’ve seen this bad practice implemented on someone else’s site too.

Thanks, Andrew. I did just copy and paste my original code from someplace online that I found via Google. I’ll try and find it again for you. I really know nothing about CSS coding.

Speaking of that, would you mind combining the code that I originally had that worked on the Home Page with the code that you provided that should work for the rest of the pages? I tried to combine the two and just generally messed things up and couldn’t get them both to work.

Thanks.

Try this instead:

@media screen and (min-width: 1200px) {

/* For devices with more than or equal to 1200px width
*/
    .page-one-column .panel-content .wrap,
    .site-content .wrap,
    .single-post:not(.has-sidebar) #primary, .page.page-one-column:not(.twentyseventeen-front-page) #primary, .archive.page-one-column:not(.has-sidebar) .page-header, .archive.page-one-column:not(.has-sidebar) #primary {

        max-width: 100%;
    }
}

But you need to remove this bit of CSS you have:

.wrap {
    max-width: 70%!important;
}

Take a look now. I just replaced my code for yours, but as you can see the Home Page content is still much wider than the rest of the pages.

Thank you for your help btw.

Okay, try this instead:

@media screen and (min-width: 1200px) {

/* For devices with more than or equal to 1200px width
*/
    .site-content .wrap {
        max-width: none;
    }

    .page-one-column .panel-content .wrap,
    .site-content .wrap,
    .single-post:not(.has-sidebar) #primary, .page.page-one-column:not(.twentyseventeen-front-page) #primary, .archive.page-one-column:not(.has-sidebar) .page-header, .archive.page-one-column:not(.has-sidebar) #primary {

        max-width: 100%;
    }
}

The only time that code works for both the Home Page and the rest of the Pages is if you leave the max-width to 100%. If you change it to anything else, then the content of the Pages does not match in width. I’ll be changing the max-width to 70% or 80% and when I do that, the content areas are not the same.

Take a look at the pages. I’ve got the max-width set at 80% using your latest code. It does this on every browser I’ve tried. IE, Chrome, Firefox…

Right okay I think this is a problem because of this selector (in the code I’m recommending).

.site-content .wrap

Try remove that, i.e. try this code instead:

@media screen and (min-width: 1200px) {

/* For devices with more than or equal to 1200px width
*/
    .site-content .wrap {
        max-width: none;
    }

    .page-one-column .panel-content .wrap,
    .single-post:not(.has-sidebar) #primary, .page.page-one-column:not(.twentyseventeen-front-page) #primary, .archive.page-one-column:not(.has-sidebar) .page-header, .archive.page-one-column:not(.has-sidebar) #primary {

        max-width: 100%;
    }
}

Yup. That seems to even the width out on all pages.

Thanks for your code magic!