Submitted 9 months ago

product preview (grid/flexbox)

Chris• 100

@PedroTheBrave

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

I decided to watch a tutorial before starting this challenge to make sure I'm heading in the right direction with my coding and choices. I still faced many challenges.

The tutorial was by Kevin Powell after seeing a comment by @MattPahuta. Thanks Matt he's very insightful.

I wasn't sure how to get my footer to align to the bottom of the page without un-centering the rest of the content. In previous challenges I was able to sit the footer outside of the body which did the trick. It wouldn't budge from the other content here.

Community feedback

Aphelion Web Development• 120

@Aphelion-im

Posted 9 months ago

First of all a nice translation of the design to code.

I found out that Josh Comeau's CSS reset (Kevin Powell talked about it in that video) cuts off a part of the image on the lower (mobile) resolutions. I also see that happening in your project.

I replaced it with Meyer's CSS reset and then it worked properly.

On CDN: Eric Meyer CSS reset

Chris• 100

@PedroTheBrave

Posted 9 months ago

@Aphelion-im ah thanks for that, I'll check out Eric's reset. I need to look more into images really and how they interact with responsiveness

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