2 columns on mobile display

[vlntnt]

Hi, how can I make 2 columns appear on the same row on a mobile phone.

And also how can I make 3 columns from the same row fill in the entire size of the mobile display (auto-stretch based on the size of the screen). I’ve tried adding height:100vh; on the row css, however what this does is stretches the background of the row and not the columns and they remain the same size whereas I need the background of the columns to stretch evenly to 33% in order to fill the background, I hope you get what I mean.

[basanta]

Hi There,

Thanks for writing in!

for your first question please add this code to your row element style.

@media (max-width:768px){
  $el .x-column{
    width: 50% !important;
    float: left !important;
    display: inline-block !important;
  }
}

For your second question please add the height to the individual column, not to the row.

Hope this help’s!