Grid Builder stacks columns rather than side by side

[jonswerens]

Hey, I’m using WPBakery Page Builder to create a portfolio page because the Pro theme’s functionality is really lacking.

I’m happy to use the Advance Grid Builder, though. But I’m having a problem with the columns.

When I create a custom grid and use it on a page, the columns do not line up side by side. They all stack instead, no matter how wide the browser screen may be.

All of the prebuilt WPBakery grids work correctly, so I don’t understand why the custom ones do not work.

Here is the page: http://scarce-dust.flywheelsites.com/projects/

Thanks for your help!

[thai]

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

p:empty {
    display: none;
}

Hope it helps

[jonswerens]

Hey there! That is a very good start! Check the page now.

It’s set for four columns, but now three line up in a row.

http://scarce-dust.flywheelsites.com/projects/

[nabeel]

Hi again,

Please add the following code as well in the Theme Options > CSS:

@media screen and (min-width: 768px) {
    .vc_col-sm-3 {
        width: calc(25% - 20px) !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!

[jonswerens]

Thank you! I’m pretty familiar with CSS, but this is something that really should not have been happening out of the box.

I appreciate your help!

[jonswerens]

The only thing to add is that I did tweak the code slightly:

@media screen and (min-width: 768px) {
    .vc_col-sm-3 {
        width: calc(25% - 10px) !important;
    }
}

10px was a better measure for where the menu is landing in my site.

Thanks again!

[nabeel]

Hi again,

There was extra spacing added by Visual Composer that had to be taken out from the width to adjust the columns perfectly. We’re glad you’ve sorted it out.

Cheers!