Visual composed column spacing

[thurlowjp]

Hi there, I have 2 issues with the columns in visual composer. Firstly when editing the pages there is no gap between the columns, which is what I desire, but when I publish the page onsite the gap appears and makes each column narrower, and leaves a space in between. Can I please have a solution to this?
Also I would like to add a background colour to a column within a content band. The issue with this is when the column is shorter than the others in the relevant band, the colour will not extend to the lower extremity of the content band. How can I solve this?

If you see the hidden note, please go to that URL, the table at the beginning of the content section exemplifies both these issues. The column on the right hand side is where I want the background colour to extend to the bottom of the content band, and all columns in the content band are affected by the first issue.

Thanks!

[Prasant]

Hello @thurlowjp,

Thanks for asking.

I am asuming that you are refering to the table that is in columnize element (https://screencast.com/t/dnV5FHTpnnd0). I believe you are looking for output as shown in the screenshot (https://www.screencast.com/t/xGqO3Ac8dNN9). Right now you have content splitted into four columns. By default each column has a width of 22% and then there is a 4% margin. If you want to remove the margin then you need to add CSS in the custom CSS panel (https://screencast.com/t/YbdQJHdK3S).

.x-column.x-1-4 {width: 25%; margin-right: 0;}

Please let me know if I missed anything and will be happy to help you further.

Thanks.

[thurlowjp]

Hi Prasant!
Your solution did solve the column width question, thanks for that!

There is still the matter of vertical spacing between content bands… can you please provide a way to reduce that to zero as well?

Lastly, the column background color issue still remains, please see the original post for clarification.

thanks for your help!

[thurlowjp]

I have just realised the solution you provided ruins the responsiveness… any solutions?

[nabeel]

Hi again,

• To keep the columns responsive and to address your other issues just replace the previous code with the following code:

@media screen and (min-width: 768px) {
    #x-content-band-3 .x-column.x-1-4 {
        margin: 0;
        width: 25%;
        display: table-cell !important;
        float: none !important;
        vertical-align: top;
    }
    #x-content-band-3 .x-container {
        display: table !important;
    }
}

Let us know how this goes!

[thurlowjp]

Hi Nabeel!
Unfortunately that solved none of the issues.

[ruenel]

Hello There,

I have checked your page.

1.) At the moment, there is no longer any gaps between the columns. You can check out my screenshot below:

Inside the column there is a gap because that came from the text gap setting. This is the result of the custom css that you may have added somewhere in the theme.

.vc p,  
.vc .p {
    margin: 10px !important;
}

2.) Adding an orange background color to the first column will not help because the height of this column is only limited because of the image height. You will have to make those columns the same height to be able to resolve the height issue and get the layout that you have wanted.

Do you want something like this?

If that is the case, you may insert this custom JS code in the Theme Options > Global JS (http://prntscr.com/evswzb) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL Javascript

(function($){
	jQuery(window).load(function($) {
		var max = 0;
		$(".page-id-424 #x-content-band-3 .x-column").each(function(index, el) {
			if( $(this).height() > max ){
				max = $(this).height();
			}
		});
		$(".page-id-424 #x-content-band-3 .x-column").css('height', max);
	});
})(jQuery);

This is a modified version of the code taken from this thread:

Use Flex Layout | Themeco Docs

Hope this helps.

[thurlowjp]

Hi RueNel!

The intended effect of the code is what I want, but it does not seem to be working… maybe I am inputting it wrong somehow, but I followed your instructions.

As far as the column gap goes, as I mentioned earlier the code above makes it non-responsive, and the information is not displayed as it should be when on a mobile device. Could you please use the emulator to get an idea of what I mean?

And lastly, I was more referring to the spacing between content bands, there is some padding that I want to be able to reduce/remove to make the content bands contact eachother.

Thanks for your help on these things

[ruenel]

Hello There,

The code is properly in place. It may not work because of the JS error present on the page. This maybe due to a plugin conflict or cache issue. Please regenerate the file cache in your Autoptimize plugin.

The column widths given to you must be updated and use this instead:

@media screen and (min-width: 768px) {
  .x-column.x-1-4 {
    width: 25%; 
    margin-right: 0;
  }
}

For the spacing of your content bands, please make sure that the bottom margin of your content is set to zero or a less number other than the default margin set in the default styling. In some cases, the bottom margin of the row container will also add up so you must check that margin as well.

Hope this helps.

[thurlowjp]

Hi RueNel!

The above code now works perfectly! Thanks for that.
The spacing of the content bands is set to zero, and I have now changed it to a negative value but there has been no change. Could you please provide another solution?

I understand it could be beyond your support, but I still can’t solve the JS errors. Could you please explain exactly what to do rectify it?

[ruenel]

Hello There,

Please deactivate Autoptimize plugin. The generated JS/CSS files may have caused the issue. By deactivating it, we can check if the given JS code will work for you.

I also check the content bands on the page. I can see that you have set the paddings to zero. There is still a margin. Please edit the page and in the content band settings, > design option, add zero margin.

If nothing is working, please provide access so we can investigate.

[thurlowjp]

Hi Ruenel!

I have changed the design options in the section settings to what you suggested. Unfortunately I had no success.
If you scroll to the bottom of /test-page you will see two bands called ‘frequently asked questions’ and notice that they still have the space betweeen.

I have disabled autoptimize and deleted it, but still no change. Please see the secure note for access details to investigate these issues further.

Thanks in advance

[christian]

Are you referring to this space?

If so, enable the Remove Margin option of the Content Band.

Thanks.