Submitted about 2 years ago

product preview card flexbox + qmedia on phone screen

Jesse Adjomo•130

@Bahbah89

Preview site View code

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

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Getting a better grasp of flexbox and first time using qmedia, which was not working at the beginning because of not using the proper @media screen and syntax. Also I forgot to implement flexbox in Qmedia.

When changing the height of my image in "body", the width automatically adjust as well so I could not get the image to get the right size on a smaller screen.

Any tips or advice on my css coding is welcoming!

Community feedback

Elaine•11,400

@elaineleungPosted about 2 years ago

Hi Jesse, great work putting this together, first of all! I'll see how to help you with the responsiveness here:

Firstly, you only got the desktop image, and you'll need the mobile one as well; that way, you don't have to resize the desktop one in the mobile view just to get it looking like the mobile image. To use a responsive image, try using the picture element:

<picture>
   <source srcset="images/image-product-mobile.jpg" media="(max-width: 500px)">
   <img class="product-image" src="images/image-product-desktop.jpg" alt="glass perfume bottle placed with a leafy background">
</picture>

You also don't have a main tag (which you'll need or the report will give you accessibility issues), and you just have everything under the body tag. Here's what I'd do with the HTML structure:

<body>
   <main class="container">
      <picture class="card-image"></picture> 
      <div class="card-info">
          <p class="title"></p>
          <h1></h1>
          <p class="info-middle"></p>
          <div class="prices">
              <p class="new-price">$149.99</p>
              <p class="old-price">$169.99</p>
          </div>
          <button></button>
      </div>
   </main>
</body>

Also, the lack of responsiveness is due to the fixed sizes you have. This is how I'd write the CSS:

.container {
  display: flex;
  max-width: 600px;
  margin: 1rem;
}
.card-image {
   flex: 1 0 50%;
}
.product-image {
    object-fit: cover;
    max-width: 100%;
    height: 100%;
}
.card-info {
  // remove height and width
}
// remove all margin-left, margin-right, and position: absolute in all .card-info elements

.prices {
  display: flex;
   align-items: center;
}
button {
   width: 100%;
    // rest of your code
}

@media screen and (max-width: 500px) {
  .container {
    max-width: 100%;
    flex-direction: column;  // no need to repeat display: flex since you already have that in the main style
  }
}

Hope some of this can help you!

Marked as helpful

Jesse Adjomo•130

@Bahbah89Posted about 2 years ago

@elaineleung Thank you for you elaborate advice and tips. I was not aware of the <picture> element that was really helpfull. Correct me if I'm wrong but by using % instead of px does that make the page more responsive? I'm gonna experiment with this on my next Projects for sure. Thanks again!

Eduardo•910
@KTrick01Posted about 2 years ago
Hi! Here is a little tip for you, your image on the mobile view seems a little deformed, this is due to his aspect ratio being modified, to fix that you can use the object-fit: cover; property in your .product-image class, hope that it helps!
Marked as helpful
2
Jesse Adjomo•130
@Bahbah89Posted about 2 years ago
@KTrick01 Thank for the tip, that seemed to do the trick!
0

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