Responsive Product Preview Card using CSS Grid and Flexbox

Hi 👋, in case you want to take a look:

HTML / ACCESSIBILITY:

• The main content of every page (the card in this case) should be wrapped with the <main> tag.

• Regarding your comment, I leave you a code snipet wishing that it helps you:

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

And this way you could give it an alt text with a description, since it looks like a meaningful image.

• On the other hand, the icon is a decorative image and therefore needs an empty alt attribute to be ignored by a screen reader.

• 'Perfume' should be capitalized with CSS (using text-transform: uppercase;) and not in HTML. Some screen readers will read out uppercased text as individual letters.

CSS:

• You might consider using relative units like rem or em since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals the font size of the root element, 16px by default).

• It might be good to get used to designing with the mobile first approach, which means designing for mobile first and then for desktop or any other device, as it is widely considered best practice.

I hope you find it useful, any questions do not hesitate : )

Regards,

Hi! There is a way to make the outer-container be center a few ways. I would also recommend that you use <main> tag in your code as it will make more sense! The way I do it with a flexbox is simple:

main {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

You could use padding or margin to allow the outer-container to be place center, but it's best recommend to use a flexbox or grid!

Hey Oluwalolope,

To make an image responsive you will need to wrap an img and source element in a picture element.

Something like this:

<picture>

<=  )" srcset="">
<img src="" alt="">
</picture>

The img element's src attribute should point to the main resolution of the image you would like to display. Then you add the source element with the media attribute, which is just like a normal @media query, and the srcset attribute which contains the src of the image you would like to display at that screen size.

From there you can apply your styles to the picture and img element, no need to apply styles to the source element as all it's doing is pointing the img element's src attribute location.

For more info have a look at https://www.w3schools.com/html/html_images_picture.asp

Another tip I would like to add is about the border rounding of your container.

Currently you have your herobox1 and herobox2 holding the styles for your border roundness. Another way you can do it from one element is by adding your border-radius to your container.

At first you will notice that box your div elements do not have rounded corners, that's when you also add the CSS property overflow: hidden to your container to find any bits of your divs sticking out.

You can have a read more about that here - https://learn.launchacademy.com/teams/public/curricula/free/lesson_groups/html_&_css:_advanced/lessons/css-border-radius

If you have any questions or need me to explain further, don't hesitate to reach out to me and/or you can also look at my submission.

Happy Coding!