Design comparison
Solution retrospective
CSS Grid awesome even for small elements like userpic and username. Not only for page layout.
What specific areas of your project would you like help with?I am not really happy with card on viewports smaller than 375px.
It starts to shrink but slower than needed to prevent overflow. Could not find a solution in this iteration. Can somebody point me in right direction?
Community feedback
- @huyphan2210Posted about 2 months ago
Hi, @vladzen13
I saw your solution and I have some thoughts:
- It sounds like the issue with your
card
is thatgrid-template-columns: min-content
is causing thecard
to stay as narrow as the content, preventing it from resizing properly on smaller viewports. This is why, under 375px, thecard
doesn't adjust to the available space. - When you removed
min-content
, the card expanded excessively on larger viewports because there was no restriction on its maximum width. To control this, you should apply amax-width
property (set to your desired value) to limit how wide thecard
can grow. - You currently have
max-width: 336px
applied to the card'simg
, but I recommend replacing this withwidth: 100%
. This ensures the image scales appropriately within its container, maintaining responsiveness and preventing it from being fixed to a specific size, which might not fit well across different screen sizes.
Hope this helps!
Marked as helpful0 - It sounds like the issue with your
- @TomSifPosted about 2 months ago
First of all, congratulations on the quality of your work! I especially appreciate the use of var(--color) in your CSS, as well as the properties you’ve implemented to improve readability — they add a lot of value to your design.
Regarding responsiveness and preventing overflow, you might consider using media queries and applying a quick animation on the tile. Personally, I used a transform: scale(0.8) on the tile to handle this issue. However, I must admit that I’m not entirely sure if this is the most appropriate method. It worked for me, but there might be a better solution."
0@vladzen13Posted about 2 months ago@TomSif transform: scale(0.8) is smart move! Thx!
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