Product preview card component - Responsive (HTML and CSS)

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

PiCTURE TAG 📸:

• Looks like you're currently using single image for both Desktop & Mobile devices, but we want to swap images according to their screen sizes. Luckily there's a native html element which may help us to achieve this method without need of css

• So let me introduce the picture element.

• The <picture> tag is commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts.

• Example:

<picture>
<source media="(max-width: 768px)" srcset="small-image.jpg">
<source media="(min-width: 769px)" srcset="large-image.jpg">
<img src="fallback-image.jpg" alt="Example image">
</picture>

• In this example, the <picture> tag contains three child elements: two <source> elements and an <img> element. The <source> elements specifies different image sources and the conditions under which they should be used.

• Using this approach allows you to provide different images for different screen sizes without relying on CSS, and it also helps to improve page load times by reducing the size of the images that are served to the user

• If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

To make the hero-img fit inside its parent div, you can use the object-fit property with a value of cover. This will scale the image to be as large as possible while still fitting inside its container, without distorting its aspect ratio.

To make the image have rounded corners to match the design, you can use the border-radius property on the parent div. This will apply the same rounded corners to the image as well, without the need for additional styles.

<div className="hero-container">
<img
src="https://www.linkpicture.com/q/image-hero.jpg"
alt="Hero Image"
className="hero-img"
/>
</div>

.hero-container {
position: relative;
height: 300px;
overflow: hidden;
border-radius: 10px;
}

.hero-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

With these styles, the hero-img will be positioned absolutely inside its parent container, with a width and height of 100% to fill the container.

I hope this helps

Excellent work 👍, but I have a suggestion!

• Replace height: 100vh to min-height: 100vh in the body, the difference is that, when you set height: 100vh to something, that means it won't be bigger than that, it might cause some problems in the future, so better approach is to set min-height: 100vh, like this in case content is overflowing container will adjust to it!

In your .container class use:

overflow: hidden; This will.make any overflowing content to be hidden, that's it basically, you can refer to my solution if it you think it will be of any help though.

Hope this helps😅