Prevent 3-column content band from stacking on mobile

[laurenrundquist]

URL: www.thetroublewithmaps.com
X Theme Version: 6.3.8
WPBakery Page Builder (Visual Composer) Version: 5.5

As you can see, I am building a page of 3-column content bands. I am trying to prevent the columns from stacking on mobile devices. I want them to look the same on mobile devices as the do on desktop and larger devices. I have used custom CSS to do this in the past but it is not working with this newer version of the X Theme or Visual Composer. Do you have any recommendations on how to do this? Thank you!

[nabeel]

Hi @laurenrundquist,

Thank you for reaching out to us. Custom CSS is required to achieve the layout you’re looking for. Please add the following code in the Theme Options > CSS:

@media screen and (max-width: 767px) {
    .home .vc_col-sm-4 {
        width: 33.33333333% !important;
        float: left !important;
    }
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!

[laurenrundquist]

Thanks, Nabeel, this worked perfectly!

[nabeel]

Glad it worked.

Cheers!

[laurenrundquist]

Nabeel, is there the possibility of reducing the vertical margins between the columns on mobile devices? Preferably I would like the margin size to be equal horizontally and vertically, so I would like to also reduce the horizontal margins above and below the content bands.

Basically, there is too much white space on mobile devices. I would like to reduce the space between the images so that the images can be larger. Is this possible?

Thanks again!

[paul.r]

Hi,

Yes, that’s possible, you can try adding this in Theme Options > CSS

@media screen and (max-width: 767px) {
.home .vc_column-inner .wpb_content_element {
   margin-bottom:35px;
}

.home .vc_column_container>.vc_column-inner {
    padding-left: 15px;
    padding-right: 15px;
}
}

Change 35px and 15px to adjust the spacing.

Hope that helps

[laurenrundquist]

Thanks Paul. There was no change with the added CSS. Any suggestions?

[laurenrundquist]

I inspected to elements and this is the CSS that seems to work for my purposes, although I can’t say I entirely understand it…

/to adjust vertical space (padding) between columns/
@media screen and (max-width: 767px) {
.vc_column_container>.vc_column-inner {
box-sizing: border-box;
padding-left: 5px;
padding-right: 5px;
width: 100%;
}
}

/to adjust horizontal space (margin) below columns/
@media screen and (max-width: 767px) {
.wpb_button, .wpb_content_element, ul.wpb_thumbnails-fluid>li {
margin-bottom: 10px;
}
}

/to adjust left and right margins/
@media screen and (max-width: 767px) {
.vc_row {
margin-left: -5px;
margin-right: -5px;
}
}

[friech]

Glad you sorted things out, always clear your browser’s cache before previewing the page.

Thanks,