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 Product preview card component using CSS Flex

@lpzisaias

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 don't know how to make two columns with the same width in a responsive way with flex to go from columns to rows

Community feedback

Hassia Issah 50,670

@Hassiai

Posted

wrap <div class="attribution"> within a footer tag and add the alt attribute alt=" " to the img tag containing the cart icon to fix the accessibility and error issue.

To center .card on the page using flexbox, replace the height in the body with min-height: 100vh.

In the media query give .img-container and .container a width of 50% or flex-basis of 50%.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Marked as helpful

1

@lpzisaias

Posted

@Hassiai Thanks for the recommendations! Previously I tried to set the width to 50% in img-container and container but it didn't work, it wasn't really centered, so I resorted to placing the image at 300px with the maximum width being 600px. In any case, I put it in the new update, I hope you can help me understand why the two child containers do not respect 50%, I understand that it should work that way

0
Hassia Issah 50,670

@Hassiai

Posted

@lpzisaias There is no need for img { width: 100%;} rather give the img a width of 100% and a border-radius value. in the media query add a width of 100% to the img.

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