Design comparison
Solution retrospective
I had a little difficulty getting the grid and responsiveness right, if anyone could give me some tips on what I can do better in both the grid and responsiveness, I would be grateful.
Community feedback
- @damigandPosted 4 months ago
First of all, it looks great! Incredible job so far, love to see it! I'm going to break down a few things you can do to make your code a bit better.
Responsiveness
The reason why your design lacks a little bit of responsiveness in other screen widths is because there are a lot of explicit widths established. I recommend using the combination of
width: 100%
along withmax-width
in an element. At first, the element will take as much space to fill themax-width
established, and thewidth: 100%
ensures that the content will not overflow when the screen becomes smaller. Applying it to your code, you could change thegrid
elemement to the following:.grid { width: 100%; max-width: 1200px; }
You'll notice that, with this change alone, the layout seems a bit off. This is because you also have to change the sizing of each individual
card
element to follow the same criteria. So you'll changecard1
all the way up tocard6
to have the following:width: 100%;
You will notice a change in how the widths interact with each other this way, specially when you make the screen width smaller. You can also apply this same technique to
height
andmax-height
to make sure the content doesn't overflow down the bottom either, or at least make sure it looks great if it ever does overflow, although in your project, I think squeezing down the font-sizes will do the trick for you, to make sure the heights are not overflowing your page.CSS Grid
While your code is not exactly wrong, it does have its limitations when you make use of the "card1 card1 card2 card3" kind of approach. I personally recommend using
grid-template-rows
andgrid-template-columns
for thegrid
element instead. This allows you to have more control over how much space can a row or a column take. This, with the combination ofgrid-row
andgrid-column
on thecard
elements, makes up for a very solid, responsive way of organizing your layout. While I could explain how you can apply these CSS properties, I think this little chat box is pretty limited, so I think you'll be better off doing your own research.Media queries
The media query established in your CSS applies on all screen sizes under
900px
. However, you limit every element to take only250px
at most. This results in the elements being a bit too small within the range of400px
to900px
screen sizes. To fix this, you can simply use the trick we learnt earlier. Change your media query code of thecard
elements to the following:.card1, .card2, .card3, .card4, .card5, .card6 { width: 100%; }
Isn't that much better? Now the elements take all the width of the screen (you can use different percentages if you want a bit of margin on the sides) and they become smaller as the screen size shrinks. Keep in mind that, if you use a percentage that's under 100% for these
card
elements, you might need to align them to the center by usingjustify-content: center
oralign-items: center
in the parentcard
element. You can also align one specific card to the center by usingjustify-self: center
oralign-self: center
instead.Don't be discouraged if things don't go your way while learning these little tricks. It only comes with time and practice, it takes some trial and error to learn in these cases. There are a lot of tutorials out there that explain these tricks better than I did, but if you found this response helpful, please consider marking it as such.
Have a wonderful time coding, and the best of luck!
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