SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Horizontal scroll, on smaller screen devices

    Im using foundation 5 and getting a horizontal scroll on bottom of the page on smaller screen anything below iPad.im trying to figure out what is causing this only obvious thing i could notice was the navigation shifting not sure how to go about it to fixing it im sure its something i have missed out or i have done it wrong.

    Link to see the issue here , if you resize browser you will start seeing a horizontal scroll below the page.

    what am i missing here to fix it.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    I think this is what's messing things up:

    Code:
    .row .row {
    width: auto;
    margin-left: -0.9375rem;
    margin-right: -0.9375rem;
    margin-top: 0;
    margin-bottom: 0;
    max-width: none;
    }

  3. #3
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, will check now if it fixes it.

  4. #4
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    tried removing the margin for the row, didnt seem to fix it

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jarjarblinx View Post
    tried removing the margin for the row, didnt seem to fix it
    Those styles I highlighted above are still there, on line 134 of foundation.css. Comment out those lines and clear your browser cache. Trust me, it works.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You shouldn't really alter that .row .row class as that is part of foundations structure.

    The real problem is that you have nested a row inside a row without it being in a column. Nested rows get a negative margin to offset the padding on the column class and if you don't use a column then the nested row gets dragged too wide. If you aren't using a column then you don't need the row.

    When you are using a grid layout like foundation or bootstrap then you must stick rigidly to the rules.

    This is the section that goes wrong:

    Code:
    <div class="row">
    				<div class="typeofwork">
    						<div class="large-4 small-12 medium-4 columns">
    								<h3>Type of Work</h3>
    						</div>
    						<div class="large-8 small-12 medium-8 columns clearfix">
    								<ul class="typesfilter inline-list">
    										<li><a href="#" data-filter="*" class="current">All</a></li>
    										<li><a href="#" data-filter=".corporateeventsimg">Corporate Events</a></li>
    										<li><a href="#" data-filter=".socialeventsimg">Social Events</a></li>
    										<li><a href="#" data-filter=".partyplanningimg">Party Planning</a></li>
    								</ul>
    						</div>
    						<div class="row">
    								<div class="large-12 small-12 medium-12 columns">

    A row element should be immediately be followed by a column classed element and the same for nested rows which themmselves must be inside a column class (or columns class).

  7. #7
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Commented line 134 it worked great thanks for that, now i will clean up the code a bit and remove the nested row and check thank you.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by jarjarblinx View Post
    Commented line 134 it worked great thanks for that, now.
    Be careful though as it will break the foundation functionality. You should never need to alter their grid structure rules as they all work together.

    It's pretty simple in that you have a row then you follow it with a column. Any nested rows must be inside that column and also have a first child of column. Any other structure makes no sense and you may as well drop the grid altogether if you are going to make changes to its core behaviour.

    Examples of the foundation grid structure from the foundation docs:
    Code:
    <div class="row">
      <div class="small-2 large-4 columns">...</div>
      <div class="small-4 large-4 columns">...</div>
      <div class="small-6 large-4 columns">...</div>
    </div>
    Code:
    <div class="row">
    		<div class="small-8 columns">8
    				<div class="row">
    						<div class="small-8 columns">8 Nested
    								<div class="row">
    										<div class="small-8 columns">8 Nested Again</div>
    										<div class="small-4 columns">4</div>
    								</div>
    						</div>
    						<div class="small-4 columns">4</div>
    				</div>
    		</div>
    		<div class="small-4 columns">4</div>
    </div>

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Off Topic:

    I guess I should stop answering framework questions. (Rotten silly things they are ...)

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:


    Quote Originally Posted by ralph.m View Post
    Off Topic:

    I guess I should stop answering framework questions. (Rotten silly things they are ...)
    I can see benefits of frameworks for medium to large sites for experienced coders but they (frameworks) do seem to attract those without the necessary experience to cope with the process of using and adapting them. For smaller sites there's really no need to use them unless you are prepared to strip them down and use just what you need but by the time you've done that you could have coded the site from scratch anyway.


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
  •