Are there certain media queries that are more useful/common than others?

The past two projects it has ended with “My Technical Documentation page should use at least one media query” but that seems very vague. Are there certain media queries that are more useful/common than others?

Definitely the most common when it comes to responsive design are media queries based on the width of the view port because you always want to try and prevent the dreaded horizontal scroll bar. For the tech doc challenge, you’ll use a media query to move the nav links to the side for wider view ports.

2 Likes

Hi @gtrman97 !

As the projects start to get more involved FCC wants you to start practicing how to use media queries.

Projects like the tribute page don’t really need media queries because you just have an image and some text. As long as you make the image responsive and use rem or em for font sizes you are good to go.

But now the projects are getting more involved than that so it is good to get used to working with media queries so you can ensure that your content looks good on all devices.

Start with mobile first design than work your way to larger screens using media queries.

How would you make an image responsive? Just by sizing?

You learned about that with the tribute page :grinning:
Remember?
https://www.w3schools.com/howto/howto_css_image_responsive.asp

So “responsive” basically just refers to making parts of the page resize accordingly when you shrink the browser window?

For the images, using the percentages for the width will make it scale and up and down nicely for different screen sizes.

You could use media queries to achieve the same result but IMO that is unnecessary overkill.

I’m on the tech doc challenge now and I was able to move the nav links to the side without a media query.