Skip to content
Submitted over 1 year ago

3-column preview card component - React TS, MUI

ptrwilk•420
@ptrwilk
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

If you switch into mobile view you might notice that first child element(orange) goes outside top edge of the window. Can you suggest how to prevent such behaviour ?

Community feedback

  • crummycat•40
    @crummycatPosted over 1 year ago

    When you set align-items: center on a container element, it centers the child elements vertically within the container. However, if the child element's height is larger than the container, the content will be cut off.

    To prevent this, you can add margin-top: auto and margin-bottom: auto to the child element.

    So for you, you will need to add margin-top: auto; and margin-bottom: auto; to .styles_container__ELhyB which is the child element of .app which has align-items: center;.

    Stackoverflow answer to similiar problem

    I hope that helps.

    Marked as helpful
    1
    ptrwilk•420
    @ptrwilkPosted over 1 year ago

    @crummycat Thx it helped indeed.

    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