@MahmoodElsaayed
Posted
-
Congrats on completing the project 🎉
-
Regarding your query,
- In this case it's actually quite simple. you can use the
clamp(min, ideal, max)
to set a responsive width to the card. - here's how to do it
- remove media queries
- in
.blog-card
setwidth: clamp(310px, 43vw, 384px)
- short explanation: basically,
clamp
tells the.blog-card
"if theideal
value grows or shrinks you'll change with it but you can't be lower thanmin
or higher thanmax
- long explanation: I'm really bad at explaining things concisely, so here's a visual guide that helps illustrating how it works.
- short explanation: basically,
- You'll notice that the img's layout broke. You'll need to set it's width to
100%
so it occupies only the width available to it instead of it's default width, and lastly add amargin-right: 23px
to the.card-image
class to stop that overflowing.
- In this case it's actually quite simple. you can use the
Marked as helpful