Design comparison
SolutionDesign
Community feedback
- @shakhboz-shukhratPosted over 1 year ago
Hello there👋! Congratulations on completing this challenge!
There are two errors in the code:
1.There is an extra semicolon at the end of the second
@import
statement, which causes the following CSS rules to not work properly.2.In the second media query, the selector ".body" should be changed to "body" to properly target the body element.
Here is the corrected code:
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],700&display=swap'); /*font-family: 'Montserrat', sans-serif; font-family: 'Fraunces', serif; */ *{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-family: 'Montserrat', sans-serif; background-color: hsl(30, 38%, 92%); font-size: 14px; min-height: 100vh; display: flex; justify-content: center; align-items: center; } .container{ margin: 30px auto; padding: 0 30px; border-radius: 10px; } .grid{ max-width: 800px; display: grid; grid-template-columns: 1fr 1fr; background-color: hsl(0, 0%, 100%); border-radius: 15px; overflow: hidden; } .img img{ max-width: 100%; display: inherit; } .card-content{ padding: 32px; display: flex; flex-direction: column; justify-content: space-between; } h6.pro-cat{ text-transform: uppercase; letter-spacing: 3px; font-size: 12px; line-height: 15px; color: hsl(228, 12%, 48%); font-weight: 500; } h2.pro-name{ font-family: 'Fraunces', serif; line-height: 1em; font-size: 34px; font-weight: 700; color: hsl(212, 21%, 14%); } p.pro-description{ color: hsl(228, 12%, 48%); line-height: 1.6em; } .price{ display: flex; align-items: center; } p.current-price{ font-family: 'Fraunces', serif; color:hsl(158, 36%, 37%); font-size: 25px; padding-right: 25px; } p.old-price{ color: hsl(228, 12%, 48%); text-decoration: line-through; } button.cta{ background-color: hsl(158, 36%, 37%); border: none; padding: 14px 0; border-radius: 14px; color: white; font-family: 14px; font-weight: 700;\n cursor: pointer; transition: background-color .3s ease;\n width: 100%; } button.cta img{ padding-right: 7px; } button.cta:hover{ background-color: hsl(158, 36%, 23%); } @media only screen and (max-width: 800px){ .grid{ grid-template-columns: 1fr; } .img img{ max-height: 450px; width: 100%; object-fit: cover; } .card-content{ display: block; }\n\n h6.pro-cat, h2.pro-name, p.pro-description, .price{ padding-bottom: 23px; } } @media only screen and (max-width: 375px){ body{ max-width: 375px; min-height: 100vh; display: flex; justify-content: center; align-items: center; } .container{ margin: 0; padding-left: 4px; padding-right: -40px; border-radius: 10px; display: inherit; } .img img{ max-height: 250px; } .card-content{ padding: 24px; } h6.pro-cat, h2.pro-name, p.pro-description, .price{ padding-bottom: 0; } h2.pro-name{ font-size: 31px; font-weight: 700; margin-top: -15px; } h6.pro-cat{ font-size: 12px; margin-top: -3px; } p.pro-description{ font-size: 13px; font-weight: 500; line-height: 23px; margin-top: -5px;\n } p.current-price{ font-size: 32px; line-height: 32px; } button.cta{ padding: 12x 0; font-size: 13px; } }
Hope you will find it helpful
Marked as helpful0
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