Skip to content
Submitted over 3 years ago

Four card feature section master

Yaiza•410
@Yaiza16
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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

  • Agata Liberska•3,995
    @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 setting align-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
    Yaiza•410
    @Yaiza16Posted over 3 years ago

    Hi, @AgataLiberska! I tried what you said and it was perfect!! Very easy and it works! Thanks a lot again :)

    0
    Agata Liberska•3,995
    @AgataLiberskaPosted over 3 years ago

    @Yaiza16 happy to help :)

    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