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 CSS Layout Basics Controlling Layout with CSS Display Modes Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding

Karl Pupé
Karl Pupé
6,718 Points
Posted by Karl Pupé
Karl Pupé
6,718 Points

Nav Bar Elements are not taking responding to inline changes 

@media (min-width: 769px) {

.wrap {
min-height: calc(100vh - 89px);
}

.container {
width: 80%;
max-width: 1150px;
margin: 0 auto;
}

  .name,
  .main-nav,
  .main-nav li {
    display: inline-block;
  }

  .name {
    width: 240px;
    margin: 50px 0;
    margin-top: 50px;
  }

}

Hi Guys!

For some reason, the nav elements are not changing whether i put ‘inline' or 'inline block' in my code. When I set it to ‘inline’ and once I shrink my screen down, each nav tab just become block elements and fill out the whole header. In my workspace, the the first left curly brace is highlighted in red as if it is not part of a pair but I’ve checked the code and or the life of me, I can’t see where I have gone wrong.

Please help!

1 Answer

Mark Truitt
Mark Truitt
17,230 Points

Hi Karl,

If I understand you correctly. The issue is when you shrink the screen down the code is not getting correctly applied?

If so 

@media (min-width: 769px) {

Change min to max.

This is saying 769 and up currently. Max-width would be 769 and down.

Mark

Karl Pupé
Karl Pupé
6,718 Points
Karl Pupé
Karl Pupé
6,718 Points

That's just the ticket! Thanx for your help Mark!

Mark Truitt
Mark Truitt
17,230 Points

Your welcome!