Submitted almost 2 years ago

Responsive Perfume Card using HTML/CSS

Dustin Soos• 60

@dustinsoos

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

So for me this project was about knocking off a good amount of rust and getting back into challenging myself with the use of CSS. The most difficult part of the project for me was implementing the grid so that the image went to the left of the card on the desktop version.

The areas of code I'm unsure of would just be the set ups of aligning the prices/making sure the picture moved over for the desktop version, and potentially the width on mobile version being a little to small.

A question I would have is when placing all my components in a container I just wanted my full container to take up a little more space in mobile version, what would be a good way to make that happen?

Community feedback

Hassia Issah• 50,670

@Hassiai

Posted almost 2 years ago

Replace <div class="card-container"> with the main tag,<h3 class="card-h3"> with <p> and <div class="attribution"> with the footer tag to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/

To center .card-container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body. Instead of giving .card-container position: absolute and its properties.

reduce the max-width card-container to 400px/300px , it think this help.

in the media query give .card-container a max-width of 600px.

Hope am helpful HAPPY CODING

Marked as helpful

Fhero• 110

@fhero2030

Posted almost 2 years ago

I think you should make the width of the add to cart button to 100% and add just a little bit of space to left of card. Also improve the spacing of "PERFUME" you can do that using "letter-spacing: {pixel}" and also adjust font title and price of the card. I also look into your css and it looks like all font in the design have the same family so you should be able to fix that by moving the font-family into the body element.

Marked as helpful

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