Two columns for mobile view

Support
#1

Hi
I crated a 4 columns section in desktop view
in mobile view it turn into single column, is it possible to set the mobile view to display 2 columns in smallest screen.

I tried this solution

Hi There,

Thank you for writing in, please add a CLASS stay-inline to your Section where the 1/2 columns are placed. Then add this to Theme Options > CSS
@media (max-width: 767px) {
.stay-inline .x-column.x-sm {
float: left;
width: 48%;
margin-right: 4%;
}
.stay-inline .x-column.x-sm:last-child {
margin-right: 0;
}
}

but it doesn’t work

#2

Hi There,

Please update the custom CSS to this:

@media (max-width: 767px) {
	.stay-inline .x-column {
	float: left;
    width: 48%;
    margin-right: 4%;
	}
	.stay-inline .x-column:last-child {
	margin-right: 0;
	}
}

Hope it helps :slight_smile:

#3

I applied the code to the global css and add the “stay-inline” class to the section’s property

but it still doesn’t work, am I doing something wrong here?

#4

Hi There,

Could you please provide us with your website URL so we can take a closer look?

Thanks.

#5

yes, please thank you

#6

Hi There,

Please update the custom CSS to this:

@media (min-width: 321px) and (max-width: 767px) {
	.stay-inline .x-column {
	   float: left !important;
       width: 48% !important;
       margin-right: 4% !important;
	}
	.stay-inline .x-column:last-child,
	.stay-inline .x-column:nth-child(2n) {
	   margin-right: 0 !important;
	}
}

Hope it helps :slight_smile:

#7

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