Design comparison
Solution retrospective
What I did was write up the code for the mobile design first. I would definitely make sure that I am correctly making all designs I do more responsive
What challenges did you encounter, and how did you overcome them?I still have concerns about my max and min widths when creating the mobile desing
What specific areas of your project would you like help with?I would like assistance with the @media queries and like to know if I am providing the max-width to the container as well as the buttons.
Community feedback
- @ortalyartsPosted 8 months ago
Hello @cloudpc7, Good job so far!
Image issue - the perfume image is distorted. For this are two reasons
- You used mobile image for desktop screen. For this project we were provided with two images for desktop and for mobile designs. To handle this you can use <picture> tag. It allows you to make madia queries. Just example:
<picture> <source srcset=”images/40under40_full.jpg” media=”(min-width: 40em)”> <source srcset=”images/40under40_medium.jpg” media=”(min-width: 20em)”> <img src=”images/40under40_small.jpg” alt=””> </picture>
- It is better to set a max-width for an image container, while for the image itself set
max-width: 100%; height: auto;
. This makes your image responsive and preserves its ratio.
For designs like this I prefer to use grid. Try setting the main.container to
display: grid; grid-template-columns: 1fr 1fr;
for desktop. This will provide you two equal columns for image and for div.content.As for your question about the @media queries: You just check when your design starts to be too squeezed on narrow screens and set a media query for that point. For example in this project you could set a starting point for desktop design like this:
@media screen and (min-width:40rem) { ... }
and insert thegrid-template-columns: 1fr 1fr
for your main.container like explained above.I hope you find this helpful! Cheers 😊
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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