Need help with Product Landing Page

HTML-CSS
1

Hi

I am facing a problem with the Product Landing Page exercise that’s making me pull my hair out.
I am using the Media tag to display the Navigation below the logo vertically when the max-width reaches 600px. But it’s not working.

Then I tried to NOT TO DISPLAY the icons in the features section when the max-width reaches 550px. It’s under the #flame id. But it’s not working either.

On the whole my media tags are not working at all for some reason. What could be the issue? Please help.

Here’s the link: https://codepen.io/umairhp/pen/XBErqR

2

have you tried pulling the @media tags out and sticking them into one or two sections at the bottom? That would ensure the settings take precedence.

3

Are you sure about those media queries are placed inside the class stylings is a correct way…? It must be separated and given a .className or #id or any selectors to apply the styles you indent to apply.

@media (...) {
  .class {
        your style goes here
    }
}
4

If you look at the solution given by the Free Code Camp they are placed inside the classes and not separately. https://codepen.io/umairhp/pen/gjzGEQ

5

If you look at the solution offered by the Free Code Camp they are placed inside the classes and not separately. https://codepen.io/umairhp/pen/gjzGEQ

6

But hey when I did it separately it worked! Thanks loads!

7

There’s one more little problem. The top navigation links now show beneath the Logo when the max-width is below 600. But they are showing horizontally. Even after i added:

@media (max-width: 600px) {
    .top-bar {
    flex-direction: column;
    flex-wrap: wrap;
    }
  }

download

They should be showing vertically not horizontally.

8

Yes because you have given the flex-direction as column (which indicates to arrange elements along the column)so they will be stacked one below the other and also flex-wrap: wrap does the same thing as flex-direction: column, so if you remove both you can see the difference.

9

I know but i want the links to show vertically. Like on top of each other.

10

Then you need to apply the flexbox to.nav-links in your code and give it flex-direction: column

11

Oh i see. Thanks a lot for the help.

12

I also see your navbar going below the content when scrolling, just give a z-index to it.

13

Oh alright! Thanks for the tip. I am sure I was going to have a hard time figuring that out :grinning: