Design comparison
Solution retrospective
I'm most proud about my speed and understanding of the project.
What challenges did you encounter, and how did you overcome them?I had a very little issue with the box-shadow but with a little research I got it done.
What specific areas of your project would you like help with?I need helping in making changes for smaller screens without using media query
Community feedback
- @MahmoodElsaayedPosted 4 months ago
-
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 helpful0 -
- @MahmoodHashemPosted 4 months ago
Hey there! 🙋🏽♂️
Congratulations on finishing the challenge! ✅
Your project is looking amazing!
The
max-width
property in CSS is a great way to control the size of a box without using media queries. It sets the maximum width of an element, ensuring that it doesn't grow larger than the specified value. This allows the element to adapt to different screen sizes. When the screen size is made smaller, the element will shrink itself to fit within the specified maximum width. This is a useful technique for creating responsive designs that can accommodate various screen sizes without the need for complex media queries. IN case if the largest width of your card is384px
you can usemax-width
instead ofwidth
to be responsive without using media queryHope you find this helpful!
Marked as helpful0
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