Skip to content
Submitted over 1 year ago

CSS Responsive design

cloudpc7•180
@cloudpc7
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Ortaly•1,190
    @ortalyarts

    Hello @cloudpc7, Good job so far!

    Image issue - the perfume image is distorted. For this are two reasons

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

    Read more here

    1. 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 the grid-template-columns: 1fr 1fr for your main.container like explained above.

    I hope you find this helpful! Cheers 😊

    Marked as helpful

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