Frontend Mentor 3 Columns Preview Challenge using grid
Design comparison
Solution retrospective
Nice experience In responsivenes for mobile can anyone tell me the best way to set the fixed height and width of card so that it will be working properly please review my rsponsivenes media querie and give me suggestions
if anyone want give any type of feedback please go for it
Community feedback
- @hitmorecodePosted over 1 year ago
Just some small things you can change to fix some issues.
body{ font-size: var(--f-size); background-color: var(--Very-light-gray-bac-heading-buttons); display: flex; justify-content: center; align-items: center; min-height: 100vh; /* change to this. 100% was breaking your page at small screen sizes */ padding: 1.5rem; .mainCradSectionContainer{ /* width: 910px; */ /* remove this, it was breaking the page on small screen sizes */ display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 10px; } @media screen and (max-width:880px) { /* html{ height: 235vh; } remove this from the media query */ /* add this to the media query */ .mainCradSectionContainer { grid-template-columns: 280px; grid-template-rows: repeat(3, 1fr); }
Well done, keep it going
Marked as helpful0@mk-muzzammilPosted over 1 year ago@hitmorecode thanks buddy i have tried percent(100%) instead of 100vh but it still not working at that time can you please guide me more about it i appreciate your response buddy thank you
0@hitmorecodePosted over 1 year ago@MK-Muzzammil sorry what I wrote it's a bit confusing. What I mean is remove
height: 100%;
and change it tomin-height: 100vh;
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