Build a Product Landing Page-How to add media query?

HTML-CSS
1

Tell us what’s happening:
Im stuck trying to add a media query to pass all the tests. Also how do I center a list?Could anyone provide any help or information,it would be greatly appreciated.
Thank you.

Your code so far


Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 8.0.0; SM-T820) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.99 Safari/537.36.

Link to the challenge:

my code pen:https://codepen.io/kayleighl/pen/LqGJMm

2

To add a media query do something like this in your css:

@media (max-width: 600px){
  #nav-bar{
    flex-direction: column;
  }
}

As far as the lists, I think you mean the navbar of your project. If so, I think you should not be using a list at all, rather something like this: https://www.w3schools.com/howto/howto_js_topnav.asp.

Finally, try using the url generated by choosing the copy embed code from the youtube video, (https://www.youtube.com/embed/5YTW3L0j20o).

3

Thank you so much. I will try these and let you know how I get on!

4

Adding a media query is pretty easy once you get the hang of it, but there is a great resource for looking it up, I still have to remind myself time and time again how to write one, so don’t feel bad if you have to look it up.

@media all and (max-width: 699px) and (min-width: 520px) {
  #sidebar {
    padding-left: 50px;
    background: url(../images/image.png) left center no-repeat;
  }
}

Lists are fine for navigation. there is nothing wrong with using lists for navigation structurally or semantically.

Better resources for media queries can be found here: https://css-tricks.com/css-media-queries/

and for navigation menus https://www.sitepoint.com/navigation-using-css/

A couple of suggestions of people to follow for Flexbox and CSS Grid would be Rachel Andrew and Jen Simmons. They are the two foremost experts on CSS Grid and Flexbox, with Rachel having worked on this for 10 year, Jen for 6+

Sidebar, Use https://css-tricks.com/ for your CSS references. W3S isn’t the best resource (I find personally).

1 Like
5

Thank you so much.
I can’t wait to go check out those people and learn some more.
I’ve also bookmarked those sites for future reference :slight_smile:

1 Like