Responsive layout using the element img with width 100%
Design comparison
Solution retrospective
I've been facing some challenges while working on this project, particularly when it comes to implementing responsive design using media queries. I find it quite difficult to determine the optimal number of media queries for different screen sizes in my CSS. For instance, when I set a media query at 1400 pixels, everything seems to work fine, and the layout adjusts accordingly. However, the problem arises when the screen size falls below 1400 pixels. At that point, my website loses its responsiveness, and elements start to misalign.
Do I need to incorporate a range of media queries to cater to various screen sizes more effectively? To ensure that my website remains responsive and visually appealing across a wide spectrum of devices.
There's something I'm doing that isn't working well. Isn't there a way to make elements responsive without having to create multiple media queries?
Community feedback
- @HexersePosted 3 months ago
For the footer part of your code, you can use flex wrap.
Also for less media queries you can check this out: https://utopia.fyi/ (This eliminates the need for media queries) https://www.youtube.com/watch?v=x4u1yp3Msao&t=176s (Teaches you how to let browser do more heavy lifting.
To tackle the shrinking problem. You can use clamp / set a min-width or min-height. So that your pictures / div / text will not grow too small. But too be honest only the programmer will shrink the screen size to those unnatural sizes.
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord