How to adjust elements that fall outside the viewport

[mr108]

Hi all,

I'm redoing the page that I made long time ago and now I'd like it to be mobile-friendly/responsive.
The page is here: http://terrybraunstein.com/tb/index.html

I run it through the https://developers.google.com/speed/pagespeed/insights/
and I'm getting suggestions for fixing under the "User Experience"

It says: "The page content is 421 CSS pixels wide, but the viewport is only 411 CSS pixels wide. The following elements fall outside the viewport:"
and it lists all these elements:

The element <div id="photo1">PUBLIC ART</div> falls outside the viewport.
The element <div id="quote">The magic of T…ty, Long Beach</div> falls outside the viewport.
The element <div id="hr2"></div> falls outside the viewport.
The element <div id="photo2">PHOTOGRAPHY</div> falls outside the viewport.
The element <div id="quote">Though her art…Museum of Art</div> falls outside the viewport.
The element <div id="hr3"></div> falls outside the viewport.
The element <div id="photo3">ARTIST BOOKS</div> falls outside the viewport.
The element <div id="quote">In addition to…Museum of Art</div> falls outside the viewport.
The element <div id="hr4"></div> falls outside the viewport.
The element <div id="photo4">MONTAGES</div> falls outside the viewport.
The element <div id="quote">To create a pi…Museum of Art</div> falls outside the viewport.
The element <div id="hr5"></div> falls outside the viewport.
The element <div id="photo5">INSTALLATIONS AND DANCE SET</div> falls outside the viewport.
The element <div id="quote">There are as m…eib, Art Scene</div> falls outside the viewport.
The element <div id="hr6"></div> falls outside the viewport.
The element <div id="photo6">ASSEMBLAGES</div> falls outside the viewport.
The element <div id="photo7">SCULPTURE</div> falls outside the viewport.


I've been trying to adjust "hr2" element to start with, just to find the proper way, but did not succeed.

The CSS file is here: http://terrybraunstein.com/tb/style.css

How to fix this?

Thanks.

[Beverleyh]

Looks like you're falling foul of container padding which is affecting the box model. e.g. width:100%; plus padding:5px; on an element doesn't equal 100% in the normal box model, and will therefore push elements beyond the boundary of the viewport (hence horizontal scrollbars).

Setting box-sizing: border-box; on affected containers would allow extra padding to be absorbed.

Alternatively, apply box-sizing globally with * { box-sizing: border-box }

[mr108]

Fabulous! I applied it globally and now on the test I'm getting:
"100 / 100User Experience"
and
"Congratulations! No issues found." - congratulations go of course to you, Beverleyh :D