How do I make my website responsive?

HTML-CSS
#1

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?

image
image1187×633 294 KB

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
#2

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:

EDIT:
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
#3

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

2 Likes
#4

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
#5

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
#6

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 !!

#7

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

#8

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:

#9