Topic: Change columns width to half in Mobile Responsive

← Back to discussions

Resolved

Posted in: General

Member

Tricia1020

December 6, 2018 at 4:49 am #17039

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!

This topic was modified 6 years by IshYoBoy.
This topic was modified 6 years by IshYoBoy.

Sorry, this forum is for verified users only. Please Login / Register to continue
or get 6 months support forum access to all forum topics for a reduced price.

Change columns width to half in Mobile Responsive

Support Us

Themes Support

Our Themes