I am trying to: use Layouts with the Twenty Seventeen Theme
Link to a page where the issue can be seen: hidden link
I expected to see: this page but without a horizontal scroll bar.
Instead, I got: a horizontal scroll bar.
I'm actually testing this on this staging website because the website I'm developing is displaying the same results, but it is behind a firewall. I have replicated this issue on three separate installs. Other than installing the Layouts plugin and running the layouts integration installer, I have not done anything with the site linked above. (no code changes, etc, and plugins are not the same between sites that have this happening). Only common denominator is hosting on WP Engine.
I'm noticing that the integration with Twenty Seventeen is now gone from the downloads section. I've spent a good bit of time over the last 2 weeks plus in setting up two websites. I really don't want to lose all of that work. I downloaded the beta version of layouts and it very much lost all of the display work I'd done.
Okay may I log in to wp-admin on the staging site to see how everything is set up? I will enable private reply fields here.
Please try adding the following styles in Toolset > Layouts CSS & JS > CSS Editor, and let me know the results:
#masthead > .row {
margin-left: 0;
margin-right: 0;
}
#masthead > .row > .col-sm-12 {
padding-left: 0;
padding-right: 0;
}
That doesn't seem to have changed anything. Sorry.
I see, I was testing on a site with a simpler design. I have an alternative here:
.row {
margin-left: 0;
margin-right: 0;
}
.col-sm-12 {
padding-left: 0;
padding-right: 0;
}
.container-fluid {
padding-left: 0;
padding-right: 0;
}
I tested on the homepage of the concrete site and the scrolling seems to be resolved. I also tested an interior page, where it looks good as well. Please replace the previous code with this code and let me know the results.
That resolved it on the interior pages. But it is still happening on the home page. Sorry and thank so much for the help!
I just tested it on another site and it seems to have resolved the issue on that site, so it may be something I've done on the home page. Any idea? If not, I'll mark as resolved. Thanks.
joe
It looks like the styles are being overridden by another file in later source order. We can add more specificity to try to prevent that override:
body .row {
margin-left: 0;
margin-right: 0;
}
body .col-sm-12 {
padding-left: 0;
padding-right: 0;
}
body .container-fluid {
padding-left: 0;
padding-right: 0;
}
AWESOME! This worked perfectly. Thanks so much for the help!
Excellent. Feel free to reopen or create a new ticket if you notice any edge cases we overlooked.
