It is not good enough to have a good layout on your website, if it is not functional in responsive design, your viewers won’t see what you want them to see…
Doing the media queries puts your knowledge of html and CSS to the test. It is easy (comparatively) to design a nice looking static website, but to try to take that static website and make it responsive is quite a challenge. I learned that the best way, at least in my opinion at this point, is to design the layout for a website (mobile first or vice versa), make the html and CSS coding for it, and then make the other layouts (mobile, tablet, or pc). This will help you to have html and CSS code to work with. This way, you can think of how to modify your code in the media queries to make your images and other content grow or shrink. Also, you may want to change from flex to block depending on the screen size. Block is better for mobile and flex is better for larger displays.
In the following screenshots you can see the change in the arrangements of the header contents, the size changes, and the change from flex display to block.
