@erensarac
Posted
Congratulations! @Zwelihlecomet2
I reviewed your solution. I wanna help you with some feedback. In your solution, It looks like you used percentage
units for width and height propertys. It's not something expected for responsive design usually. You should use relative lengths
like a rem
or em
.
For example. If you know your card length after the 768px (mobile)
. You can handle the challenge using the examples below.
Example 1: You can use calc
function for relative width. It will be 100% width but 2rem minus. If your root have 16px
so it will be width: 375px - 32px
and its mean your width will be 343px
on 375px screen sizes. Your container already have grid
and place-items: center
. So It will be centered.
/* It's for mobile */
.container-content {
width: calc(100% - 2rem);
/* 2rem for giving space left and right. */
}
/* It's for desktop */
@media screen and (min-width: 768px) {
.container-content {
width: 24rem;
}
}
Example 2: But if you don't wanna full width on mobile (768px and below). You can use specific width, because we know the width on mobile. It should be near the 20rem. You should use margin-right
and margin-left
at this method to give space around the edges.
/* It's for mobile */
.container-content {
width: 20rem;
}
/* It's for desktop */
@media screen and (min-width: 768px) {
.container-content {
width: 24rem;
}
}
Also you can use Flexbox at your container-content
and texts
classes to control your layout simply.
I recommend these resources for you.
You can browse my solution here;
If you have specific questions, don't worry asking. Happy coding!