Crio Full Width Footer = Horizontal Scrollbar

[nicolepaschen]

When I set either the header or footer layout to a full width container, a horizontal scrollbar appears at the bottom of my browser. It's coming from the margin on the row with the columns for content.

[nicolepaschen]

This is how I fixed it, but there's probably a more elegant way.
#colophon .boldgrid-section .row,
#masthead-sticky .boldgrid-section .row,
#masthead .boldgrid-section .row {
margin-right: 0
}

[timelsass]

@rramo012 @nicolepaschen i'd recommend reverting 2f36dc9 so .row is using margin: auto;outside of context of .entry-content container. I think a lot of styles were reliant on that which will cause various horizontal scrollbars to appear when changing container/full width controls with page headers, header, footer, widget areas, featured images, search page results, page containers etc.

if reverting that then the horizontal scroll issues shouldn't exist anymore, and then just apply the margin left/right of -15px for wherever its needed for .entry-content. I didn't see what the purpose of removing that css was but I'm assuming it was for rows inside of entry content for the editor plugin? If that's the case it might be best to just target the entry-content rows specifically to override the default of .row { margin: auto; } that was set.

I'm just going based off the framework css only, and not using the editor plugin, which may also be overriding other styles, but if the above is true, I think something like this added to the _bootstrap-additions.scss file might work:

/** Probably safe? **/
.entry-content .row {
    margin-left: -15px;
    margin-right: -15px;
}

/** Probably safest? **/
.article-wrapper .row {
    margin-left: -15px;
    margin-right: -15px;
}

I noted .article-wrapper is probably the safer of the two as this wrapper was added for dealing with the page title containers, but I don't remember 100% if the page title containers/rows are applied inside of .article-wrapper before .entry-content. If that's the case, then .entry-content is probably the safer choice.

@nicolepaschen the only problem with the code you put above is the specificity of apply the margin reset to all elements outside of the .entry-content - which could go down the rabbit hole of header left header right (I think these two treat the row and margins differently from header-top from what I recall [could be wrong on this though]), fixed/not fixed, and various page title headers (feat images/background color etc) with containers/no containers applied. I think to catch all the areas where we want margin: auto; (or margin-right: 0) will end up being a lot of cases which were all designed around the row not having the margin, and offsetting elements by the margin when necessary to get proper alignments of content/image background/containers/sections, pages vs posts vs archives, etc. If you do need the margin-left/margin-right for .row just specify that where needed (my only assumption with all this was the change was likely for .row inside of post/page content.

I don't really recall the specifics as to why we ended up with .row being set to margin: auto; in the first place, but just wanted to make sure you guys were aware of the areas where horizontal scrollbars are going to be added since .row was being treated as not having the margins applied to left/right except inside of the entry-content for rows generated using the boldgrid editor, or manually entered bootstrap html in page content.

I'd try reverting 2f36dc9 and one of the two snippets for the adjustment to .row's margin in context of the .entry-content and see if this resolves the previous issue that was trying to be resolved, along with the new issues caused by it's removal.

[nicolepaschen]

Crio - v2.2.11 resolved the Header issue, leaving this ticket open for the Footer issues