Skip Navigation

[Resolved] Horizontal scrollbar appears after I install twentyseventeen integration plugin.

This thread is resolved. Here is a description of the problem and solution.

Problem: I see horizontal scrollbars appear when I activate Layouts Twenty Seventeen Integration.

Solution: Add some override code to Layouts CSS. This will format the site to fit within the horizontal space without scrolling:

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;
}
This support ticket is created 7 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 10 replies, has 2 voices.

Last updated by Christian Cox 7 years, 1 month ago.

Assisted by: Christian Cox.

Author
Posts
#576092

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.

#576185

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.

#576198

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.

#576225

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;
}
#576230

That doesn't seem to have changed anything. Sorry.

#576235

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.

#576250

That resolved it on the interior pages. But it is still happening on the home page. Sorry and thank so much for the help!

#576251

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

#576266

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;
}
#576270

AWESOME! This worked perfectly. Thanks so much for the help!

#576273

Excellent. Feel free to reopen or create a new ticket if you notice any edge cases we overlooked.