Change columns width to half in Mobile Responsive

Tricia1020 — Thu, 06 Dec 2018 02:49:54 +0000

Hey, I am trying to get some of my columns to go side by side on mobile. When I try to add a class to these rows, it is competing with part of the theme code.

the theme code is:

@media (max-width: 768px) {
	.vc_row-fluid [class^=”wpb_column”],
	.vc_row-fluid [class*=” wpb_column”] {
		float: none !important;
		width: 100% !important;
	}
}

@media (max-width: 768px) {

.vc_row-fluid [class^=”wpb_column”],

.vc_row-fluid [class*=” wpb_column”] {

float: none !important;

width: 100% !important;

}

my code is:

@media only screen and (max-width: 768px) {
	.vc_row-fluid  .wpb_column.mobile-half {
		width: 50% !important;
		float: left !important;
	}
}

@media only screen and (max-width: 768px) {

.vc_row-fluid .wpb_column.mobile-half {

width: 50% !important;

float: left !important;

}

If I remove the theme code the rest of the rows get messed up, but If I don’t, my code gets ignored.

Screenshot 1

Screenshot 2

Any help is appreciated!

Reply To: Change columns width to half in Mobile Responsive

IshYoBoy — Fri, 07 Dec 2018 09:44:02 +0000

Hi,

the thing is that our selector is stronger than ours. So try making it stronger by changing it to:

.vc_row-fluid .wpb_column.mobile-half {
	width: 50% !important;
	float: left !important;
}

.vc_row-fluid .wpb_column.mobile-half {

width: 50% !important;

float: left !important;

}

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

Support ForumChange columns width to half in Mobile Responsive – Support Forum

Change columns width to half in Mobile Responsive

Reply To: Change columns width to half in Mobile Responsive