Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,706 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

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,706 Points

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

Your welcome!