Submitted 7 months ago

Product Preview Card with HTML and CSS

Grunt395• 40

@Grunt395

Preview site View code

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I used Flexbox for the first time in this project and struggled to center the main content of the page. Is there a best way to center the content with or without Flexbox?

This project involved a desktop and a mobile image included. I ended up displaying both images at the same time on the page, but would hide one of them using display: none; for the respective layout. Is there a better way to display either the desktop or mobile image without having to manually hide one of them?

Community feedback

Anar• 700

@anar-sol

Posted 7 months ago

Hello =)

Instead of using two separate img elements, you can use picture and source to specify different images for mobile and desktop depending on the viewport size.

In my solution, I've set the mobile version as the default image and the desktop one starting at 640px width viewport.

<picture>
    <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900">
    <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image">
</picture>

As you'll see in these MDN and web.dev articles, there are many other situations where picture and source can be useful.

Marked as helpful

Grunt395• 40

@Grunt395

Posted 7 months ago

@anar-sol This is such a useful tag. Thank you!

Qendresa Braha• 350

@HiQendresa

Posted 7 months ago

Hi @Grunt395 👋

Congratulation on finishing this challenge, you did great👏🏻

CSS Flexbox is great tool used in web development to create responsive and flexible layouts. 🚀

You can learn more about it in this link

Here are some suggestions to help improve your code:

It is not a very good idea to apply styles directly to the <body> selector because it is straightforward. Styles applied to the <body> selector can impact the entire page, making it suitable for setting background colors, fonts, and other global design choices. In this case you have only one container but in cases where there are more components in the page you will need to be more selective.

So the selector body should be more general like this e.g:

body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; overflow-x: hidden; max-width: 1440px; position: relative; }

A crucial element is missing in your code, which should always be included, whether it's a component or a full website, it is the main element. Its presence is essential for maintaining good semantics and accessibility, as it assists in identifying the primary content of your site.
You can set the content inside the <main></main> and give a max-width to the container.

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

To center the content, there are a lot of ways to do that. .parent-container { display: flex; justify-content: center; align-items: center; } or you can use ** margin: 0 auto;*** another way is using position absolute to the container.

Wish you good luck! Happy Coding 😊

Marked as helpful

Apurv Patel• 20

@apurvpatel2121

Posted 7 months ago

use media query

.image { width: 100%; height: 300px; /* Adjust the height as needed / background-size: cover; background-position: center; background-image: url('desktop-image.jpg'); / Default image */

@media (max-width: 768px) { background-image: url('mobile-image.jpg'); /* Mobile image for screens 768px or smaller */ } }

Marked as helpful

Mikail Ghali Imam• 200

@Imammika

Posted 7 months ago

hello bro! you can just use one image tag next time, then use media queries to specify how you want the picture to look on smaller screens. all the best. Happy Coding.

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