Responsive Three Column Layout using HTML and CSS Flexbox

Solution retrospective
Everything was easy to implement, apart from one thing. When shrinking the window size, the buttons do not line up vertically, as the length of the paragraphs above each button is not equal. So when there is a line break in one of the paragraphs, the button in that section shifts downwards. Does anyone know how to solve this?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @FalejevV
Hi Astijus, one of the ways to solve this problem is to make your section class a flexbox element by adding this lines to it. This will convert your section into a column that has more control.
.section{ display:flex; flex-direction:column; }
Then you add
flex:auto;
to paragraph, so it will take all the remaining space and push button down. (also remove position:fixed from button)This way, paragraph can be any size, it will still push button to bottom of block.
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