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?
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.
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.