Design comparison
SolutionDesign
Solution retrospective
the picture responsive was a bit problematic, please what unit do is best suitable for responsive or do i have to combine different and if yes in which situation
Community feedback
- @wellington-damasioPosted about 2 years ago
It's the best practice to not set specific width to images.
What I did was:
- I used flexbox and divided the card 50/50 between the image and the content.
- Set the max-width of the image to 100%
max-width: 100%;. By doing this, the image will expand when it's needed to fit it's cotainer but will never become distorted. - See in which screen width the mobile image begins to not fit, that's when you switch to the desktop image. You can use the
<picture>tag or media queries for that.
Hope it helped you!
PS: Don't forget to style the font of the button ;)
0
Please log in to post a comment
Log in with GitHub
Join 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