How do I make my website responsive?

Hello everyone!
I want to make my website responsive.
I added meta name=“view port” in the head, and I have started to make @media quires depending on the width I want to apply to different screens.
my question is, does this picture’s width have to be 100% to be responsive?

I want my navbar and icons be in menu like that when I shrink the screen : image
so do I have to make it first in html then tell the media quiry to show it only when screen shrinks?

sorry for taking long…

1 Like

Hey @beesha! If you want the picture to be responsive, you need to add two CSS properties: max-width: 100% & height: auto;. This will make your image automatically responsive.

Try this challenge for additional info:

If you want your navbar to shrink like in the picture you provided, you need to add that hamburger menu in the html markup also, and then set it to display: none;. Then, use display: block inside your media queries so that it will appear when the screen size shrinks. Also, don’t forget to add display: none; to the nav links in media queries so that it will be hidden when the screen size shrinks.

I tried to make this answer as simple as possible. If you think this is too hard to read, I will edit it.

Hope this helps you! :grin:

1 Like

Though it is good to learn things from scratch but try not to reinvent the wheel, The responsiveness can be easily implemented in a website using a utility framework like tailwind or full fledged like bs4


Yes, you can always use frameworks like Bootstrap, W3.CSS etc. It helps you to work faster. But, for simple needs like this, I would not recommend anyone to use them. It is because they have performance problems and can slow down your site.

1 Like

Yes, the picture width has to be 100% to be responsive and you should follow these tips to make your website responsive?

  • Add responsive meta tags in your HTML document.
  • Apply media queries to your layout.
  • Make images and embedded videos responsive.
  • Ensure your typography will be easily readable on mobile devices.
1 Like

That was more than clear thank you thank yooou
I’ve done it and it worked.
reviewing freecodecamp curriculum on responsive design was a great idea to remember all the details !!

I’ll try it next time !! Thank you for suggesting it to me

What confuses me is (apply media to your layouts)
I find it a bit difficult to know what exactly should I do with media queries to style it properly , I think it needs a lot of practice

Thank you so much for organizing them in points , that helped :white_heart: