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!