2 Columns in Mobile

Support
#1

It seems from all the posts making 2 columns work on mobile seems to be per-site fix.

Here is the testing URL where I’d like 2 columns on mobile - http://www-tnaza.hosts.cx/wheels

Thanks

#2

Hi there,

Please add a class that is common to the columns that you want to be displayed 50% of the screen width on mobile. In your case, the two column in the middle. Then add this code to the Global CSS:

@media (max-width: 767px) {
  .mobile-half {
      width: 50% !important;
      display: inline-block;
  }
}

The code above will take effect to the columns that you have added mobile-half class in.

Hope this helps.

#3

Thank you!

It sort of worked. I have 2 columns but the content is staying on the left hand column only.

#4

Hi There,

Please update the previous CSS to this:

@media (max-width: 767px) {
.mobile-half .x-column {
      width: 50% !important;
      float: left;
}
}

Hope it helps :slight_smile:

#5

Excellent. Thanks!

#6

We are glad we were able to help, you are welcome :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.