hitmorecode• 6,230
@hitmorecode
Posted
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 helpful
0
Muhammad Muzzammil• 350
@mk-muzzammil
Posted
@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
hitmorecode• 6,230
@hitmorecode
Posted
@MK-Muzzammil sorry what I wrote it's a bit confusing. What I mean is remove height: 100%; and change it to min-height: 100vh;
0
