Design comparison
Solution retrospective
Hey,
Is there some way to position every card's image to the right bottom of the container without using absolute position? When I make the browser smaller, text puts on top of imagen so I would like text and image keep the spaces between them.
Any other feedback will be appreciated too :)
Community feedback
- @AgataLiberskaPosted over 3 years ago
Hi @Yaiza16. Two things you could potentially do: make the cards collapse into a column earlier so there's more space, or (which I think answers your question better) is set your card to
display: flex;
align items to flex-start, and then override that on the images by settingalign-self: flex-end
.The reason the images are covering your text is that
position: absolute
takes the element out of the normal flow of the document and there isn't any space reserved for it. With flexbox you can still position elements the way you want them quite easily, and get rid of that overlapping, but you may need to adjust the height of your container so that the content doesn't overflow the card.0@Yaiza16Posted over 3 years agoHi, @AgataLiberska! I tried what you said and it was perfect!! Very easy and it works! Thanks a lot again :)
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