Blog/Flex issue?

Hello, I have followed countless tutorials and I’m still baffled as to why my Summary text is not in alignment with each other??

If anyone can shed some light on this that would be much appreciated.

Thank you!


Here is my site Read-Only: https://preview.webflow.com/preview/konstrukt2?utm_medium=preview_link&utm_source=designer&utm_content=konstrukt2&preview=7764256fddc89e001285c92b15dfb110&pageId=5ec505fe1b60fbd43ee7d17b&mode=preview

Are you talking about this section (attach picture)? Please elaborate your issue, this can help many others to help you :slight_smile:

If you are talking about the button “Click here to learn more”, its padding is 15px compared to the 20px padding of other elements. Change the padding to 20px and it will be aligned.

If you are talking about the title in gold, it isn’t aligned because of its length (2 rows vs 1). Set its position to absolute and then organize the content accordingly.

Hello Luca and Shokaviv,
Thank you for helping me.

So on the designer everything is aligned perfectly but in preview mode the white summary text goes out f alignment.

How do i fix this?

Tip: When making cards a good design pattern is to create structure with divs and elements inside. I normally make a card-header, card-body, and a card-footer div inside a card-wrapper div. I place elements inside the header, body, and footer. Use flex on the wrapper and then you can flex child settings to control the position of the children (center etc). Then spacing between elements can be adjusted with min-height. This way the containers are handling the layout, not the elements that vary in height.

1 Like