@elaineleung
Posted
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
@Bahbah89
Posted
@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!
