Design comparison
Solution retrospective
hey everyone, hope you're doing good. this is my first time working with grid and I'm happy how it turned out though I had a lot of issues still glad I did it. I had a problem scaling my text to move with my box for the mobile view but read an article about adding a width of 100% to the parent/ child container. i actually always face the problem where my text doesn't move with my container box like it doesn't shrink or increase while scaling I was hoping if anyone has any tips on how to fix it please comment and help me out. thanks alot
Community feedback
- @rishat-sePosted about 2 years ago
Hello Oduh,
You have done great job coding this challenge! I like your use of area templates for Grid layout. Regarding for your question. You use fixed sizes for elements and Grid and that do not allows your elements to shrink. Here are some changes that can improve your responsiveness.
- Use max-width command instead of width for .main-container. Use for max-width: 1110px that challenge. It will allow main container to shrink as your decrease viewport size.
- Fixed sizes in that command grid-template-columns: repeat(4, 240px) do not allow your grid to shrink too. Change it to grid-template-columns: repeat(4, 1fr).
Do not forget to change them in media queries too.
Hope it will help! Have a nice day!
0@preciousoduhPosted about 2 years ago@rishat-se I haven't been feeling well lately so couldn't immediately reply to this , thank you so much will put that into practice!!! Also any advice to keep me motivated while coding I want to change fields but I'm starting to question if this is for me 😓
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