Submitted 3 months ago

Responsive product preview with Sass, Flexbox and Grid

beowulf1958• 1,170

@beowulf1958

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

Most proud of being able to swap the picture when the page goes from desktop to mobile and to make the image align with card content. The picture swap was accomplished in a very easy way that is easy to understand. I was able to create the page very quickly once all the research was done by using sass.

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

Every time I fixed something, something else broke! I tried three different ways to swap the picture and settled on the easiest way. I had a lot of challenges with flexbox and lining up items in the content, then switched over to grid and it worked. I was able to get a lot of good ideas from others who had done the challenge.

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

I tried to use the picture element, but the image didn't scale or respond. Is there some trick to getting the image to fill its div?

Community feedback

juliusalberto• 220

@juliusalberto

Posted about 2 months ago

The solution includes semantic HTML, which is nice. I am not sure whether it is accessible or not but it's good enough for me :)

The layout doesn't look good on iPhone SE as the card element is bigger than the screen (I assume that you don't use the Figma file, which provides the exact width and height). It's nice though. The margin between elements is a bit... off. (I'm sorry if I am too nitpicky in this) - the margin between elements in mobile and desktop should be different.

Code is well structured. Good job!

PS: I don't know much about grid so can't comment on your picture element solutions.

Please log in to post a comment

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