@pmcsilva90
Posted
Hi Osiel!
Your solution to the challenge is quite good, I liked how you used the translate property to make it look like the card is hovering higher. I used margins to separate the different elements but I think your gap solution was better.
A few suggestions though:
Your card is not responsive to smaller screens. You could the width property with the min() function a using vw units. Also to change the font size in smaller screens you could use the clamp() function on the font-size property. I think you forgot to change the card title color to yellow when hovering.
Keep up the good work!
Marked as helpful
@xXOsielXx
Posted
@pmcsilva90 Hi! Thank you very much for the feedback.
I finally made the page responsive thanks to your suggestions and this awesome article from CSS Tricks
- I changed the font-size to be:
html {
font-size: 16px;
}
body {
font-size: clamp(0.75rem, 0.5625rem + 0.8333vw, 1rem);
}
.preview-card__title {
font-size: clamp(1.25rem, 1.0625rem + 0.8333vw, 1.5rem);
}
- I changed the width of the preview card to be:
.preview-card {
width: 100%;
max-width: 364px;
}
...and I changed the title color by adding:
.preview-card__title:hover {
color: var(--primary-color);
}
Thanks again, for all the support. Keep coding and have fun!
