What are you most proud of, and what would you do differently next time?
Becoming familiar with Git, GitHub, and GitHub Pages. Looking forward to the next challenge.
What challenges did you encounter, and how did you overcome them?
Making responsive text based on image size with only CSS. Just set the following properties on the text element:
What specific areas of your project would you like help with?
What is the best way to make this responsive and compatible with old browsers.
@MikDra1
Posted
If you want to make your card responsive with ease you can use this technique:
.card {
width: 90%;
max-width: 37.5rem;
}
On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.
Also to put the card in the center I advise you to use this code snippet:
.container {
display: grid;
place-items: center;
}
Hope you found this comment helpful 💗💗💗
Good job and keep going 😁😊😉
@wagnermoschini
Posted
This solution is a bit different visually
The card must be 320px width and 499px height, and in your solution was 320px width and 533px height. It's because you put an extra space between image and content that not was as the figma spec that was the space-300 property from design system file.
Also the title right color is slate-900 (#1f314f) and the text is slate-500 (#68778d)
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
