@DavidMorgade
Posted
Hello Angel, congrats on finishing this challenge on FrontEndMentor!, here are a few tips that can help you for next projects!
1 - To center a simple component like this want there is an easy way with just a few lines of code, instead of giving your main
any margin
, give your body
a heigth: 100vh
and then a display: flex
, flex-direction: column
, justify-content: center
(to center vertically) and align-items: center
(for horizontal centering).
2 - For your image, the easies way to use two image for the same img
tag and switching them depending on the size, is to use the <picture>
tag and the source
tag, you can wrap your img
with this tag and depending on the device screen, display diferent images, for example:
<picture>
<source media="(min-width:660px)" srcset="./images/image-product-desktop.jpg" >
<img src="./images/image-product-mobile.jpg" alt="Product picture
</picture>
In this case, for 0 to 660px you will have the mobile version, and for 660px+ you will have the desktop version.
Hope my feedback helps you, good work and keep going!
Marked as helpful
@angeliran
Posted
@DavidMorgade Thank you very much for your advice