Responsive 3 column preview card solution using flexbox

Community feedback

• 

  Siva•210

  @sivakumarsPosted almost 2 years ago

  Hi, Akshay.

  You could use a min-width of 9 rem on the button to keep the button from shrinking if that is what you are asking.

  Or, you could scale down the font-size of the button.

  Also, for each card you could make a it a flex container, with flex-direction set to column.

  Let me know if this is what you are looking for.

  0

  ---

  

  SUJIT ANDHALE•0

  @xyz-789Posted almost 2 years ago

  @sivakumars Hey brother, Are you from India?

  0

  

  Akshay-Tarde•160

  @Akshay-TardePosted almost 2 years ago

  @sivakumars Hey Siva, thanks for the tips. But that's not what I was looking for exactly. When you shrink the width of the solution gradually, the height of the paragraphs change. As the number of words in the paragraphs are different, the paragraphs occupy different height. Different height leads to different margin-top for the button leading the button to be in different positions in the 3 different columns. This is the problem I have.

  0

  

  Siva•210

  @sivakumarsPosted almost 2 years ago

  @Akshay-Tarde You can use flex-box or grid for each card, which is a section (sedan, luxury and SUV) element in your code.

  Flexbox with flex-direction: column and gap for each card (section) will help you achieve what you are looking for and you can push the button element to the end of the card, so it always stays there irrespective of the amount of text in the card.

  I hope you get the idea to fix your problem with this hint.

  Marked as helpful

  1

  

  Akshay-Tarde•160

  @Akshay-TardePosted almost 2 years ago

  @sivakumars Hey Siva, thanks for this tip. I just applied grid on the section and then aligned and justified the button. This has mostly fixed the responsiveness issue of the button. I've marked your response as helpful. Regards.

  1