Design comparison
Solution retrospective
the colors were abit tricky to perfect. i'm quite unsure of the responsive mobile preview of the product. i wonder what i should have done to make it responsives, especially the mobile version.
Community feedback
- @hitmorecodePosted over 1 year ago
Congratulations well done. There is a problem with your CSS the media query is not responding after taking a look at it, it seems there is a small mistake.
You need to add a space between and and (). If you fix this your mobile version if fine
@media only screen and(max-width:550px) { .card{ margin-top: 1rem; margin-bottom: 1rem; } .image-container{ width: 100%; height: 40%; } .image-container img{ content: url("images/image-product-mobile.jpg"); } .perfume{ width: 100%; } .perfume .name{ padding-right: 0; } .card{ flex-direction: column; } .image-container img{ border-bottom-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 0px; } }
In the CSS you also have the font-family in multiple places. You don't have to do that, just add the font-family on the body and it will apply to the entire page.
body{ font-family: Montserrat, Fraunces; background-color: var(--cream); min-height: 100vh; display: flex; align-items: center; justify-content: center; } .perfume .description{ font-family: montserrat; /* remove this line */ font-size: 14px; color: var(--dark-grayish-blue); line-height: 22px; margin-bottom: 1.75rem; } .title{ font-family: montserrat; /* remove this line */ letter-spacing: 3px; font-size: 14px; color: var(--dark-grayish-blue); margin-bottom: 1.7rem; } .price-tags .old-price{ font-family: montserrat; /* remove this line */ color: var(--dark-grayish-blue); }
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord