Submitted about 2 months ago

Blog

innitman• 130

@innitman

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Blog preview card

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

It was easier doing this the second time from Figma.

What challenges did you encounter, and how did you overcome them?

I couldn't work out how to make the font size change without media queries. I also found centering the card tricky; for some reason, this time : display grid with place-content: center didn't work on the .card-container. I had to use place-self: center on the .card itself.

What specific areas of your project would you like help with?

If .card-container is set to display: grid; and .card is a child of .card-container, place-content: center; did not work when width of .card was set to min(384px, 100%-48px). It seemed to calculate the larger width of the min options on desktop, use this to incorrectly center the content, and then shrink down to the smaller of the min options in terms of what it actually painted. Is this just an issue with using width: min(a,b) with grid children? I'm aware of minmax for the grid-columns, but am wondering if we can use plain old min for the grid children.
Any help on how to make the font smaller without media queries as the front end mentor challenge suggested would be appreciated :)

Community feedback

Bartek20• 120

@Bartek20

Posted about 2 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

innitman• 130

@innitman

Posted about 2 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

Martin Malyska• 190

@scaphyxx

Posted about 2 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

innitman• 130

@innitman

Posted about 2 months ago

@scaphyxx

Many thanks :)

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.
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 :)

Please log in to post a comment

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