Design comparison
Solution retrospective
I'm most proud of the responsibility of the site because with these challenges we are provided with two mockups, one for the mobile and one for a desktop layout. The in-between sizes of the screen are also important to consider when developing a responsive website.
Next time, I would find a way to make the CSS file less cumbersome.
What challenges did you encounter, and how did you overcome them?I was having trouble with some of the images overflowing with their parent elements.
What helped was adding this to my CSS to see the borders of elements and what exactly was causing the overflow:
What specific areas of your project would you like help with?I'd like to know if there's a better practice for developing a responsive website without a huge CSS file that has screen size-specific customizations.
I'm trying to find a way to minimize the amount of CSS I write. Typically I start developing the mobile layout of a site and afterwards move on to designing the standard 1920x1080 desktop layout. Already that requires some media queries. What adds more complexity to the CSS file are the in-between sizes. Most often the in-between sizes need certain customizations to make the site's responsiveness look natural and less like the in-between sizes were forgotten about.
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