3 col per row becomes 2+1 col on tablet, the 4th col doesn't fill the space

Fanny Lefert

• May 08, 2020 05:46
• Edited

Hi,

I have to display nine team's descriptions, and I want them to be displayed in rows of 3 columns on desktop, 2 columns on tablet, 1 on mobile.
It seems pretty easy except that because each row of 3 columns becomes a row of 2, on tablet I have one row of 2 columns then one row of 1 column. What I mean is the fourth column, because it is added automatically to a new row, doesn't fill the space next to the third column.
Is there any option to solve that?

Thank you,

Fanny

1

• 

  Sandra Prunici

  • May 08, 2020 10:01

  Hi Fanny,

  This happens because this block is built from 3 rows and each row has 3 columns. Therefore, in the tablet and mobile mode, the columns are placed regarding the rows. To fix this inconvenience I suggest adding 2 or4 columns for the row in the desktop mode.

  Best regards,

  Sandra

  0
• 

  Fanny Lefert

  • May 08, 2020 12:17

  Hi Sandra,

  thank you for your answer.

  So I tried already to put 4 columns in my row but I want only 3 columns to be displayed in this row, so I tried to adjust the width to push the fourth col below, like with a flexbox but it doesn't seem to work.

  Except adding extra css is there another solution than displaying the 4 columns?

  Regards,

  Fanny

  0
• 

  Sandra Prunici

  • May 11, 2020 06:35

  Hi Fanny,

  No, unfortunately, isn't possible to display in the tablet mode the first column from the second row, in the same row with the third column from the first row. We are using the Bootstrap Grid and the row is working in such away. To change this behaviour you have to add some Custom CSS.

  Best regards,

  Sandra

  0

Please sign in to leave a comment.