Row w/4 even columns force stacking on mobile

Support
#1

Why are the columns stacking on mobile instead of staying horizontal?

#2

Hi there,

The columns stack on mobile devices because that is the nature of responsive sites where the page elements respond and adjusts according to the screen width the site is viewed on.

However, you can override that default behavior by adding this code to the Element CSS of the row that contains the 4 columns:

@media (max-width: 767px) {
  $el .x-column.x-1-4 {
    width: 22%;
    float: left;
    margin-right: 4%;
	}

  $el .x-column.x-1-4:last-child {
    margin-right: 0;
  }
}

If you are not able to find the Element CSS right away. click on the customize option of the row settings and you should be able to find the field there.

Hope this helps.

#3

Am I not able to tell the 4 columns that I want them to be equally sized to stretch across the phone horizontally in a dynamic way?

#4

That script does not work or change anything

#5

Hi Jonathan,

Let’s make that CSS code provided as a CLASS, so you can use it every time you want to have a 1/4 columns to be inline in mobile.

Please update the code given CSS code and add it to Theme Options > CSS instead.

@media(max-width: 767px){
  .stay-inline .x-column.x-sm.x-1-4 {
    width: 22%;
    float: left;
    margin-right: 4%;
  }

 .stay-inline .x-column.x-sm.x-1-4:last-of-type {
    margin-right: 0;
  }
}

Then apply the CLASS stay-inline to your section (where the icons are), as long as your section has that stay-inline class, your 1/4 columns will stay inline even on mobile view.


Hope it helps,
Cheers!

#6

It does not work. I think its because I have a row with 4 columns and each column has an off-canvas content with text and an icon. I think we are targeting the wrong container. I think we have to target columns

#7

Hi Jonathan,

Yes we are targeting the columns, this is a 1/4 column selector (.x-column.x-sm.x-1-4)

Would you mind providing us the direct page URL and the log in for this so we can take a closer look?

Thanks,

#8

Hi,

I forgot to mention that you can place the login credentials in a Secure Note.

Thanks,

#9

Hi Jonathan,

Thank you for the login, It’s aligned now, you seem to change it to tab? That works fine as well.



UPDATE: Sorry for the confusion, I don’t see the class stay-inline added on your section. Please add it.

Then update my given CSS code to this:

@media(max-width: 767px){
  .stay-inline .x-column.x-sm.x-1-4 {
    width: 22% !important;
    float: left;
    margin-right: 4%;
  }

 .stay-inline .x-column.x-sm.x-1-4:last-of-type {
    margin-right: 0;
  }
}

Cheers!

#10

No I did not change it to Tab. That slower in the page
See here your credentials to log in

#11

Hi @asbell,

May I know how you’re adding those CSS? What you added is this to your dimension row’s CSS

.dimensions .x-column.x-sm.x-1-4{
    width: 22%;
    float: left;
  margin-right: 4%;
}

Which is wrong, when adding CSS, it should always start with $el since its Element’s CSS option and not a global one. I went ahead and added the correct CSS.

It’s now forcing the four columns regardless of device.

Thanks!

#12

thanks for correcting

#13

You are most welcome. :slight_smile:

#14

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