Docs

[ZerotoOne]

hey there,
Id like to keep the 1/2 + 1/2 column layout on mobile. http://prntscr.com/ctcrf6
thanks for your help! 🙂

[Joao]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Joao

[ZerotoOne]

This reply has been marked as private.

[Friech]

Hi There,

Thank you for the credentials, you can add this under Custom > CSS in the Customizer.

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

Then apply the class stay-inline to 1/2 columns that you want to stay inline even in mobile view.

Hope it helps, Cheers!

[ZerotoOne]

thank you! I applied the class to the columns but it does not work :/

[Rue Nel]

Hello There,

The code did not work because you were using a marginless columns. Please have your code updated and use this instead:

@media (max-width:  767px) {
	.x-section .x-container.marginless-columns .x-column.x-sm.stay-inline {
        display: inline-block;
		float: left;
    	width: 48%;
    	margin-right: 4%;
	}

	.x-section .x-container.marginless-columns .x-column.x-sm.stay-inline:last-of-type {
    	margin-right: 0;
    	padding-left: 0 !important;
		padding-right: 0 !important;
 }
}

Hope this helps. Kindly let us know.

[Author]

Posts