Design comparison
Solution retrospective
My attempt at a responsive card. It is okay but not exactly like solution. My area of code im unsure of is the media queries section.. i used min-width not knowing what it does. I need to work on the 'min' and 'max' properties on heights and width because im not too familiar with them. 😅
Community feedback
- @Ambe-Mbong-NwiPosted almost 2 years ago
Nice job. Media queries help you to define different style rules for different device widths like phones and laptops.
max-width changes the background color to blue if the viewport is 375 pixels wide or smaller
@media (max-width: 375px){ body{ background-color: blue; } }min-width changes the background color to lightgreen if the viewport is 376 pixels wide or wider
@media (min-width: 376px){ body{ background-color: lightgreen; } }See more information using this link @media rule in our CSS reference
Lastly, to centralize your page both vertically and horizontally, include
body{ margin: 0 auto; }Marked as helpful0@michaelr47Posted almost 2 years ago@Ambe-Mbong-Nwi thank you very much, I appreciate this!
0@Ambe-Mbong-NwiPosted almost 2 years ago@michaelr47 You're welcome. Feel free to get to me anytime.
0
Please log in to post a comment
Log in with GitHub
Join 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