Results 1 to 3 of 3

Thread: How to adjust elements that fall outside the viewport

  1. #1
    Join Date
    Jul 2013
    Posts
    34
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default How to adjust elements that fall outside the viewport

    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.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,035
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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 }
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    mr108 (07-14-2016)

  4. #3
    Join Date
    Jul 2013
    Posts
    34
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    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

Similar Threads

  1. Resolved Vertical align div to viewport height
    By keyboard in forum CSS
    Replies: 7
    Last Post: 07-06-2016, 10:11 AM
  2. Moving the Viewport of a DrawingPanel
    By magicgavin in forum Java
    Replies: 0
    Last Post: 03-14-2012, 01:46 AM
  3. Snow fall script not working in firefox
    By hellays in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 12-08-2009, 11:11 PM
  4. [HELP] Falling snow - it wont fall down in FF
    By icycool1121 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 12-10-2007, 07:53 AM
  5. help! how to use the solid block fall down menu
    By Stevenand in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-09-2007, 05:00 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •