Submitted over 2 years ago

Responsive product preview card using flexbox

Xavier•140

@xavCS

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi, this is my first solution on Frontend Mentor for the product preview card component The main challenges for me were positioning and layout in terms of responsiveness i.e., using different displays like flexbox

I tried to lay my CSS out in a way that made sense e.g., creating rulesets per element as you go down the card or at least I tried to follow that order (it might be broken a couple times), if anyone has comments on my layout practice I would welcome them.

I probably didn't need to use a main tag in the HTML but I'm not very familiar with accessibility conventions yet, looking to practice that some more after this project

For some reason, I could not get the card to stay centered and the attribution text to stay at the bottom of the screen without something in the layout messing up, could anyone help me out with that?

I think generally this was a nice project and I found sizing to be okay with Figma but maybe I should have relied on it a bit less, I'm not sure if my way of setting widths etc. is the best way, if anyone has a better solution I'd be happy to see it.

Community feedback

Lucas 👾•104,400
@correlucasPosted over 2 years ago
Hello Xavier, congratulations for you first solution and welcome to the Frontend Mentor community!

Your solution is having this issue because the display:grid; created a default row for the elements, in this case the container and the attribution. Note that you can also consider not using the attribution to don't worry too much about this element. To fix this error the quick way is adding grid-template-rows: 1fr; to the body, note that the attribution will be separated to the container but it will be centered. Put the attribution inside the main tag to have them together and centered. Code below:

body { display: grid; grid-template-rows: 1fr; }

Hope it help you bro, keep coding!
Marked as helpful
1
Xavier•140
@xavCSPosted over 2 years ago
@correlucas Thanks a lot! I'm still new to display:grid so I didn't catch that, definitely helpful. Thanks again
1

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