Submitted over 2 years ago

Product Preview Card

Brian Schooler•440

@superschooler

Preview site View code

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

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I had a hard time getting the image and text elements to both take up 50% width on the desktop view. I think if I use the background-image property in CSS instead of the image element in HTML it would allow me to more easily accomplish this without distorting the picture. Any other advice / suggestions?

Additionally, I had a hard time figuring out how to center the entire element vertically without setting a top margin with a viewport height attribute. Any thoughts on how to make this work?

Community feedback

Yasmine•700

@Yasmine10Posted over 2 years ago

Hi Brian 👋

To center the component you just have to add the following in <body>:

 align-items: center;
 height: 100vh;

One way of making the image and text each take up 50% would be the following code:

<article>
  <div class="image-container">
    // ... (I would place the images inside <article> because it's a part of it
  </div>
  <div class="text">
    // everything that is currently in <article> comes here
  </div>
</article>

//css
article {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

// or if you want to use flexbox:
article {
 display: flex;
}
article .image-container {
  flex-basis: 50%;
}
article .text {
  flex-basis: 50%;
}

Also a better way to switch to the desktop image would be to use a <picture> element in your html, you won't need a media query if you use that

<picture>
  <source srcset="images/image-product-desktop.jpg" media="(min-width: 650px)">
  <img src="images/image-product-mobile.jpg" alt="" class="img-fluid" />
</picture>

Hope this helps!

Marked as helpful

Chisom Ogbonna•380
@MavreonPosted over 2 years ago
Hello Brian, Great job on this one, you really nailed the design, and it is responsive too, congratulations🎉 Now to your concerns, you had a hard time centering the card and also handling the image at different views(Mobile and Desktop). I would share my GitHub repo link to my version of the challenge if that helps so you could see how I went about handling centering the card and also not really need to use the <img src=" " alt=" "> tag in my HTML script. Github Link: Mavreon's Repo
Marked as helpful
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