Design comparison
Community feedback
- @correlucasPosted about 2 years ago
๐พHello Mohieb, congratulations for your new solution!
Your component is perfect, but is not responsive yet, this is due the
fixed width
you've applied to the container.The main difference between
width
andmax-width
is that the first property is fixed and the second isflexible
, for example, a component withwidth: 320px
will not grow or contract because the size will be ever the same, but a container withmax-width: 320px
ormin-width: 320px
can grow or contrat depending of the property you've set for the container. So if you want a responsive block element, never usewidth
choose ormin-width
ormax-width
.Note that there's no need to use
height
here, because since you set aheight
for an element, this means that this element will grow until a certain point and after that the inner content (as texts or images) will start to pop out the element due its fixed height, so isn't necessary to set theheight
the container height comes from the elements, its paddings and height..card { /* height: 450px;*/ max-width: 320px; }
Hope it helps and happy coding!
Marked as helpful0 - @dev-mohiebPosted about 2 years ago
Thank you so much. I will definitely keep an eye out for those things in my next project!
0
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