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 Review Card CSS

@anthonyplicata

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 used this challenge as more of a learning challenge. There were new concepts in here, and I wanted to learn better practices based on a professional. I watched Kevin Powell as a guide, and it was incredibly helpful. I feel much more confident in my markup now. I learned to create a responsive webpage for mobile and desktop using flexbox and grid. Using <picture> is a great tool to add multiple img files that can be used for different screen sizes. I learned better ways of organizing elements too.

This challenge tested me quite a bit with figuring out how to make it responsive. I realize that vertical and horizontal card are the same and it depends on the width of the screen and the max-width you set. I spent quite a bit of time trying to make two separate "cubes" to put next to each other, but I learned quickly they did not maintain interaction how I intended.

I'm still struggling with bringing the contents into the center of the page. For the last challenge I was given helpful advice of removing padding and margin to utilize the flexbox potential. It worked for that one, but for this challenge I could not figure it out.

I would love some advice on that.

Edit: With some helpful advice (a reminder as well) I got it centered! Should stick in my head this time.

Community feedback

theCavyDev 510

@okeke-ugochukwu

Posted

Hi Anthony, you're doing really really great!

Your elements are centered quite alright. The height of your body tag is snapped to the total height of it's content, making the entire page look like it's not centered.

Give it a min-height of 100vh and you're good

Marked as helpful

0

@anthonyplicata

Posted

@okeke-ugochukwu Thank you! Ah yes, I knew I was missing something but chalked it up to just being a feeling. Thanks for the help!

0
theCavyDev 510

@okeke-ugochukwu

Posted

@anthonyplicata I'm glad I could help

0
Boots 😺 1,590

@adityaphasu

Posted

Hi!

Nicely done!! The markup is actually pretty nice 👌🏻

You have actually pretty much used everything right to center the content except you are missing min-height:100vh on the body! whether flexbox or grid the element needs a height for the content to be vertically center of, hence we use min-height:100vh so that the content gets centered on the page.

After adding min-height:100vh on the body the content should be in the center!

Keep up the hard work and happy coding!😊

Marked as helpful

0

@anthonyplicata

Posted

@adityaphasu OH yeah that's it! Thank you for the clarification on that as well.

1

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