ElectricFeet on "[Theme: Zerif Lite] Bugette in stylesheet for about-us section"

Hi there!

I've spotted a bugette in the about-us section---not so much pixel-perfection as verging on OCD, but there you go; I need to get out more :)

The row (and hence the columns in the row) in the about-us section are shifted to the left, rather than being properly centred. This is particularly noticable on a phone, where the columns are shown one after another, vertically, and are all clearly shifted to the left. It's visible on the demo site on a phone.

The section header of the about-us section is fine. What comes after that is not.

Analysis as follows:
1. Bootstrap sets the margins of the container to be equal (with auto), thus centering the text.

2. The section header picks up 0px left and right from the html setting. We're still centered.

3. The .about-us . row class's margins are then set at -15px left and right (on line 2201 of the style.css). We're still centered.

4. The .row class margins are then set at 0px left and right, together with float: left; and width: 100%; (on line 3290 of the style.css). These margins are ignored in the about-us section, as the .about-us . row class is more specific and overrides them. But the float: left; and width: 100%; stick. We're now no longer centered.

The reason why this breaks the centering is a bit complex (I find it so, anyway!). It's explained here. It scomes down to that combination of float: left; and width: 100%;, which shifts things to the left. You can see the opposite effect (that is, a shift to the right) if you float right with 100% width. The reasoning is complex, but it is what it is.

I understand why the theme wants to float left and have the 100% width. Without the former, the about-us section is wonky and without the 100% width, the get-in-touch section is wonky.

There are various solutions, and the most "elegant" ones would need to be tested across the site---but I know that touching Bootstrap-based CSS on an established theme is a rabbit-hole out of which it's hard to extract yourself, so I won't suggest them.

A pragmatic and better approach would be simply to fix the about-us section (which is the only one that I can see is visually broken), with an extra declaration at line 2201 of style.css:

FROM

.about-us .row { margin-left: -15px; margin-right: -15px;
}

TO

.about-us .row { margin-left: -15px; margin-right: -15px; width: auto;
}

This moves the text back to the centre, as it forces the browser to respect the negative right margin as well as the left one. And the CSS is specific enough only to affect the about-us section.