Blog

Community feedback

• 

  Bartek20•120

  @Bartek20Posted 4 months ago

  I think you should add min-width to .card to prevent text from overflowing. Also, you forgot to round the image. I was unable to replicate your problem, so no help from me... My personal opinion about img in that case, object-fit and height are unnecessary. Think about what would happen if that img showed a person and on a smaller screen size, you would only see the torso of that person (if the person is in the center of img) without object-fit, img gets scaled, not cut.

  Marked as helpful

  0

  ---

  

  P

  innitman•130

  @innitmanPosted 4 months ago

  Many thanks :)

  Have added a min-width, and rounded the img :)

  I agree with what you mean re: object-fit and height. It's just that in this case, the Figma file seemed to fix the height to 200px in both desktop and mobile, and it seemed to crop the content accordingly (the mobile version of the image is missing the left and right details that are on the desktop version), so object-fit: cover seemed the closest match I could find to that :) @Bartek20

  0
• 

  Martin Malyska•190

  @scaphyxxPosted 4 months ago

  hi!

  its a really good solution!

  place-content: center should be set on your card-container. And to get the font-size smaller wo/ media-queries we need to set a dynamic fontsize: i am using this formular:

  font-size: clamp( minValue rem, calc(minValue rem + (maxValue - minValue) * (100vw - minVw px) / (maxVw - minVw )), maxValue rem );

  Marked as helpful

  0

  ---

  

  P

  innitman•130

  @innitmanPosted 4 months ago

  @scaphyxx

  Many thanks :)

  1. Re centering -> oddly, display: grid with place-content:center didn't work on the .card-container in this case. I had to use place-self: center on the .card itself in this case. I agree it should normally work, so there must be something else overriding it somewhere else.

  2. Thanks - your font size system that uses the vw gave me an idea to try container queries using cqw, and this worked (have updated code):

     @container card (max-width: 350px) { & { font-size: clamp(0.75rem, 4cqw, 0.875rem); } }

  I know it's still effectively a variation of a media query, but I think in real life I'd be inclined to use the container solution, as it makes the whole .card more like a re-usable component if using CSS nesting with the container query nested within :)

  0