Hello amazing community! 👋
I'd like to ask you a question: what are your solution for displaying one image for desktop and another for mobile?
Decided to simply go with :
.mobile-img {
display: none;
}
@media only screen and (max-width: 745px) {
.desktop-img {
display: none;
}
}
What do you think? 😅
CSS media queries are a great way to accomplish this.
Another fantastic way is with a picture element in HTML: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
The main upside to the picture tag is the media query and images will stay relevant to where they are in the document (inside HTML). Which also helps keep CSS concise and organized.
fell free to give some feedback
Overall the desktop (wide viewport) looks good. The main feedback I could give is that the mobile display isn't as accurate to the design spec as it could be.
For mobile: depending on the width "parfum" is on the same or different lines. While in the design spec "Eau De Parfum" is entirely on a second line. This could be accomplished by specifying a width on .main-title in the media query and adjusting the font-size.
It would be good to revisit and come back to this.
