Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Thomas King
Thomas King
15,197 Points

(Sass) Working with Foundation 5, I have a gap between left margin of 'nav' and first 'li'

I have a row with two columns in my mark-up. The mobile-first design is fine.

The larger screen has a gap that shows the background of the nav element; the gap is between the left margin of 'nav' and the left margin of the 'ul'.

Here is the HTML markup:

<div class="row">
            <header class="small-12 large-3 columns">
                <h1>Vantage</h1>
            </header>

            <nav class="small-12 large-9 columns">
                <ul>
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">IT Support</a></li>
                    <li><a href="#">Programming</a></li>
                </ul>
            </nav>
</div>

Here is the Sass/CSS:

$primary-color: #3B6F9A;
$secondary-color: #EFAC51;
$text-color: #FFE7C7;

$standard-size: 1.5em;
$small-row-height: 25px;

header {
    background-color: $primary-color;
    line-height: $small-row-height;
    border: 1px solid red;
    h1 {
        text-align: center;
    }
}

nav {
    background-color: $secondary-color;
    line-height: $small-row-height;
    border: 1px solid red;

    ul {
        width: 100%;
        height: 100%;
        list-style: none;

        li {
            background-color: green;
            float: left;
            width: 33.33%;

            a {
                &:hover { background-color: #000000; }
                display: block;
                width: 100%;
                text-align: center; 
            }
        }
    }
}
Thomas King
Thomas King
15,197 Points

Fairly certain that Foundation 5 uses normalize.css

Wayne Priestley
Wayne Priestley
19,579 Points

Yeah Thomas,

Sorry about that, I removed my post when I re-read the question, just not in time.

Thomas King
Thomas King
15,197 Points

@Wayne, that's fine, like I said earlier, Normalize.css is being used in Foundation 5. I have this odd feeling it is because I am using F5, which hasn't updated all it's libraries to spec with Sass 3.4. I have Sass 3.4 installed on my server, but F5 works best with 3.2.

Wayne Priestley
Wayne Priestley
19,579 Points

I put your code in to SassMeister but I couldn't get it to display as you mentioned, there were gaps left and right so that wasn't much good to me, i'll try code pen and see how that looks.

Thomas King
Thomas King
15,197 Points

I also tried Sassmeister for this, problem is unless it can simulate Foundation's classes and functionality, it may not replicate the code properly.

I also removed the extend from the SCSS so it could render the HTML. Would a screenshot help?

Wayne Priestley
Wayne Priestley
19,579 Points

I'm using codepen, I got pretty dam close to a fix, then decided to try something else and messed it up.

I have to leave for a bit but when I get back I'm going on a mission to sort this out.

Thomas King
Thomas King
15,197 Points

I'll be heading to work myself soon, thank you for your help, looking forward to what you have found.

1 Answer

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Thomas,

So this is what I came up with:

$primary-color: #3B6F9A;
$secondary-color: #EFAC51;
$text-color: #FFE7C7;

$standard-size: 1.5em;
$small-row-height: 25px;

header {
    background-color: $primary-color;
    line-height: $small-row-height;
    border: 1px solid red;
    h1 {
        text-align: center;
    }
}

nav {
    background-color: $secondary-color;
    line-height: $small-row-height;
    border: 1px solid red;
    ul {
      height: 100%;
      background-color: green;
      list-style: none;
      text-align: center;
      li {
        display: inline;
        a {
             &:hover { background-color: #000000; }
             width: 100%;
             padding:3px 10% 3px 10%;
          }
        }
      }
    }

Now I don't know how this is going to work with you mobile view, maybe a media query with a display block for list items will be needed.

Hope this is the effect your looking for, let me know either way and we can work at it some more.

Thomas King
Thomas King
15,197 Points

Sorry to say, that didn't do it. I have it pretty much right where I need it. I don't know if Codepen or Sassmeister is able to show the issue I'm having.

The other thing is that Foundation might have some includes and mixins that affect the layout, so your code might have brought the desired effect, but may not necessarily work for my solution. Which isn't good.

Wayne, I'll keep you posted if I find a solution, and thank you for spending the time to help. If you have any other ideas, I would love to hear them. At the very least, when I figure this monster out, it'll be a good tutorial or blog piece to help others.

Wayne Priestley
Wayne Priestley
19,579 Points

Well it was worth a try, you could be right about foundation. I think you can get sassmeister to load foundation, I'll look into it tomorrow.

Good luck and let me know how it works out.

Wayne Priestley
Wayne Priestley
19,579 Points

Hey Thomas,

Can I get a screen shot of the problem your having, I loaded up Foundation v5 into SassMeister along with that code I wrote and couldn't see any issues like you described.

Thanks.

Thomas King
Thomas King
15,197 Points

Wayne, I'll get you that screenshot within the next day or so, I have a lot on my plate right now. ;)

Wayne Priestley
Wayne Priestley
19,579 Points

Thomas, there's no rush at all.