@CpalmerD20
@electr0space
Submitted
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? 😅
@CpalmerD20
Posted
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.
@wagnnermorais
Submitted
fell free to give some feedback
@CpalmerD20
Posted
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.
Marked as helpful
