3-column-preview-card-component-main
Design comparison
Solution retrospective
Hi there, This is my First solution. I found it difficult while making the page responsive. I was stuck in-between media queries. Any advice on responsive design is highly welcome! TIA :)
Community feedback
- @HassiaiPosted almost 2 years ago
Replace <div class="outerbox"> with the main tag. to fix the accessibility issue. for more on semantic html visit https://web.dev/learn/html/semantic-html/
Give . container a height of or auto or no height value to prevent the content from overflowing on smaller screens.
In the media query , reduce the screen size of the media query and give the width a fixed value instead of a percentage value. for a responsive width replace the width of .container with a max-width. e.g:
@media (max-width:600px){ .container{ max-width: 25em; } }
Remember to always use em and rem as unit for the width, margin and padding values. for more on this watch this https://youtu.be/N5wpD9Ov_To
Hope am Helpful. HAPPY CODING
0 - @Aikaykalu17Posted almost 2 years ago
body{ background-color: hsl(0,0%,95%); height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; } replace the "height:100vh" with "min-height:100vh" "width:100%" with "max-width:1440px"
Then add margin:0 auto;
0 - @Aikaykalu17Posted almost 2 years ago
Trying to make pages responsive depends on how good you are with the Google Chrome inspect feature If you are good with the Google Chrome inspect feature then all you have to do is write the code for various screen sizes
@ media only screen and (min-width:300px) and (max-width:320px){
} Copy and paste your CSS code in between the braces Use Google Chrome inspect feature to make it responsive on 320px screens If this isn't clear I'll explain better I can put you through media queries You can as well go through my code and check out how i wrote media queries code for various screen sizes
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