Perfume Product Challenge 🔥🔥🔥 (Uses CSS Flex Layout)

1. In the two divs that make up the card, I use the flex: 1 property to make them equal in size, and they can adjust size equally when I change the max-width on the entire card. The problem is that the flex property only adjusts for content, not margin or padding, so if you check my code, the computed size of the text container is bigger than the image.

2. I am designing it with the flex layout, so no div is needed then 😊. EDIT: It's not working - the image is way bigger than the text container but it is adjusting in size...

3. Could you show me the code for this? Because I never used SVGs before and it seems there are more attributes (like path, fill, and XMLNS) than the image element.

4. Is using width: 100% not better than using height: 100% and object-fit:cover together?

Additional notes:

1. I will do that. I just put 375px because that was the mobile design in the style-guide.
2. Will the code for the <picture> element be written like this then?

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

THANK YOU :D:D:D:D

Aban

Hi Aban,

first of all congratulation on completing this challenge.

Now let's dive in to your questions:

1. not sure what you mean by that, can you explain a bit clearer what you are trying to achieve?
2. you don't need div around picture element, it depends how you want to style it (grid, flex, float etc..)
3. of course, you can create <img> tag and load that svg as a src attribute and style it accordingly with width or height attribute if needed
4. if you inspect perfume-image-div in the Dev Tools you will see that it is the same height as text-container beside it, so one way to fix the height of an image is to put height:100% but that will also change it's aspect ratio so you can fix that with object-fit:cover to bring it back to original aspect ratio

Additional notes:

1. i think the media query for switching the layout is to narrow, i would make it around 600px for example
2. also i believe that it would be better to serve mobile image directly in the <img> tag and set desktop one in the <source>, you will load the smaller file size image if user is using mobile

Keep coding!