Design comparison
Solution retrospective
I'm getting more and more familiar with using CSS Grid. It is more simple to arrange it on many different screen size.
I still have the problem about responsive design. Which breakpoints should I used? How do I optimize the design on many different screen types? How to keep the precision of the design (keep it being centered and the size look good)? Still need a lot of work to do, huh.
Any feedback would be greatly appreciated!
Community feedback
- @correlucasPosted over 2 years ago
๐พHello Andesa, congratulations for your solution!
Your solution seems pretty good, I saw that you've add an aditional breakpoint for tablet, that's cool.
Asnwering your question:
The problem with your card is that you set a fixed value for the
width
not allowing the card to stretch, try to swap betweenwidth
tomax-width
to allow the card contract and fit better the content in a smaller screen.You should also consider having a box-shadow more transparent using
opacity
andblur
inside the box-shadow properties.Try this value and see the difference:
box-shadow: 0 0.9375rem 2.625rem -0.6875rem rgb(131 166 210 / 40%);
Hope this helps, happy coding!
Marked as helpful1@AndesaputraPosted over 2 years ago@correlucas wow, what a great feedback. I will definitely try it later.
Thanks for the appreciation too. I am currently struggling with responsive design, so I try everything that come to mind, and thats include making breakpoint for tablet hehe
Thank a lot, Lucas!
1@correlucasPosted over 2 years ago@Andesaputra Happy to hear that now your solution works better. Keep coding Andesa.
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