Submitted about 2 years ago

I used mostly CSS with flexbox, and positioning to create the card.

Joel Nwamba•50

@joel-elyon-nwamba

Preview site View code

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

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hey guys new attempt for the year. It was difficult for example to position the card component in the middle, I used margin: 0 auto didn't work or display flex with justify-content: center, and align-items: center it didn't go through. I ended up using position: relative; which seemed like the harder rather than simpler way.

With that said it's one thing to learn step by step the tutorial process, and another to do it completely by yourself.

Community feedback

Melvin Aguilar 🧑🏻‍💻•61,140

@MelvinAguilarPosted about 2 years ago

Hi @Joel-Nwamba 👋, good job for completing this challenge!

Here are some suggestions to improve your code:

Add these lines in the <head> to display the site properly based on user's device:

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Try to use semantic tags in your code. More information here:

With semantic tags:

<body>
   <main class="container">
      . . .
   </main>
<body>

You can use <picture> tag when you need to change the image on different viewports, using this tag will prevent the browser from loading both images, saving bandwidth. More information here

Example:

<picture>
   <source media="(max-width: 620px)" srcset="./assets/images/image-product-mobile.jpg">
   <img src="./assets/images/image-product-desktop.jpg" alt="Gabrielle Essence Eau De Parfum">
</picture>

The container is not center. You can use flexbox to center things

body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

height property should be used to center an element with flexbox

More information: A Complete Guide to Flexbox (CSS-Tricks) | How TO - Center Elements Vertically (W3Schools) |

Your card is broken because you are using the position property:

Update the styles to this:

.container {
    display: flex;
    /* flex-direction: column; */
    /* justify-content: center; */
    /* align-items: center; */
    /* position: relative; */
    /* top: 100px; */
    /* right: 175px; */
    max-width: 600px;
}

img {
    width: 100%;
    object-fit: contain;
    border-radius: 2px;
}

.description-price {
    background: hsl(0, 0%, 100%);
    /* width: 300px; */
    flex: 50%;
    /* height: 450px; */
    padding-left: 10px;
    /* position: absolute; */
    /* left: 860px; */
    border-radius: 2px;
}

Reference: How TO - Two Column Layout

Note that I updated this to make the image a bit responsive:

img {
    width: 100%;
    object-fit: contain;
     ...
}

And your html file should look like this:

<main class="container">
      <picture>
         <source media="(max-width: 620px)" srcset="./img/image-product-mobile.jpg">
         <img src="./img/image-product-desktop.jpg" alt="Gabrielle Essence Eau De Parfum">
      </picture>
      <div class="description-price">
      . . .
      </div>
</main>

You should learn how to use media queries to change the view on mobile devices.

I hope those tips will help you.

Good Job and happy coding !

Marked as helpful

Joel Nwamba•50

@joel-elyon-nwambaPosted about 2 years ago

@MelvinAguilar Thank you for the information, I'm gonna over it :)

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