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 card using Grid

@Victor-M-Giraldo

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


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

I used grid for this one. I'm much more comfortable with flexbox but wanted some practice.

What challenges did you encounter, and how did you overcome them?

I originally was using flex for the design, but had trouble getting it to work with the desktop layout and making sure I had two equal width columns. Not sure how to get that to work. I figure it's setting the flex-basis to the same amount, and then flex-grow to 1.

What specific areas of your project would you like help with?

The text sizes aren't exactly responsive. I tried setting something like this but it gave me issues with the desktop layout because the right side of the card was taking up too much space. Advice would be appreciated here.

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

I also don't really know how to make this responsive for super big screens. Like I guess I could pop a width: 80% on there and a max-width at the same time but I don't know how else.

Community feedback

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