Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive landing page with flex box and media queries

Thidar Nyeinβ€’ 410

@thidarnyien

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I fond difficult while building responsive layouts

Community feedback

Lucas πŸ‘Ύβ€’ 104,420

@correlucas

Posted

πŸ‘ΎHello Mal Thidar, congratulations for your first solution! πŸ‘‹ Welcome to the Frontend Mentor Coding Community!

Your solution is almost fully responsive by what I saw, something you need to fix is the image that gets distorted while the component scales down with the screen. See how you fix it below:

Make all the images inside the container scaling and respecting the size of the container, you need to add max-width: 100% and add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

img {
    display: block;
    object-fit: cover;
    max-width: 100%;
}

✌️ I hope this helps you and happy coding!

Marked as helpful

0
Thidar Nyeinβ€’ 410

@thidarnyien

Posted

Thank you for your help

0

Please log in to post a comment

Log in with GitHub
Discord logo

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