Relatively Responsive with CSS Grid

Community feedback

• 

  Huy Phan•2,080

  @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 that grid-template-columns: min-content is causing the card to stay as narrow as the content, preventing it from resizing properly on smaller viewports. This is why, under 375px, the card 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 a max-width property (set to your desired value) to limit how wide the card can grow.
  • You currently have max-width: 336px applied to the card's img, but I recommend replacing this with width: 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 helpful

  0
• 

  Thomas•370

  @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

  ---

  

  Vladislav Zenin•120

  @vladzen13Posted about 2 months ago

  @TomSif transform: scale(0.8) is smart move! Thx!

  0