Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Three Column Layout using HTML and CSS Flexbox

@astijusk101

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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?

Community feedback

FalejevV 500

@FalejevV

Posted

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.

0

@astijusk101

Posted

@FalejevV Hey, I have implemented your suggestions into my code, but the problem persists. As the window shrinks and the paragraph takes up more and more lines, the buttons do get pushed down. However, the buttons do not get pushed down all at the same time. Meaning when you shrink the window, there are points at which the buttons are not vertically aligned. How could I fix this?

0
FalejevV 500

@FalejevV

Posted

Check github.I pushed css file to your project.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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