Mobile 2 Column

Support
#1

Hi trying to add this css to make mobile 2 column on a specific section

@media (max-width: 979px) {
.x-column {
float: left !important;
width: 48% !important;
margin-right: 4% !important;
}
.x-column:nth-child(2n) {
margin-right: 0px !important;
}
.x-column.x-1-1 {
float: none !important;
width: 100% !important;
margin: 0 auto !important;
}

how do i add this css to a specific section only

please help

#2

Hi Rexneel,

I am not sure if that code will do the trick or not. But if it works and you just need to force it to be limited to a specific section you can go to the section by clicking the magnifying glass icon, and select the Customize tab. Then click on the Element CSS option and add the code below:

@media (max-width: 979px) {
	$el .x-column {
		float: left !important;
		width: 48% !important;
		margin-right: 4% !important;
	}
	$el .x-column:nth-child(2n) {
		margin-right: 0px !important;
	}
	$el .x-column.x-1-1 {
		float: none !important;
		width: 100% !important;
		margin: 0 auto !important;
	}
}

The $el added to the code ensures that it will be limited to that specific section.

Click here for more information about the Element CSS feature.

Thank you.

#3

hi thanks for the help…is there any other way which i can make 2 column on mobile

#4

Hey Rexneel,

Try following this video tutorial : https://youtu.be/kRUYBX5JNyc

Please just note you’ll be responsible for tweaking the code according to your needs and fixing the code if you encounter problems with it.

I’d also like to let you know that in the future, you will not need code as the Responsive Layout feature which will allow users to have a different column layout per screen size is already in the making. You can learn more about that in our Changelog at https://theme.co/changelog/

Hope that helps.

#5

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