Remove a gap between content bands

Hi there, see https://stratuscyber.com/

I have an image (svg) set, with this code:

background-position: bottom; background-size: 100%;

But there is a tiny white gap appearing on certain screen sizes:

How do I get rid of this? ie make it flush to the area below on all devices, screen sizes?

Thanks.

Hi logoglo,

Thanks for reaching out.

The reason why there’s a 1 border gap between your content band 4 and 5 is because of your SVG image background. I suggest that you will set margin-bottom -2px on your content band 4 and it will do trick or you can re-upload your SVG image without any white border at the bottom.

Hope that helps and let us know how it goes.

Thank you.

Thanks, there isnt a border on my svg, I made sure of that…

https://stratuscyber.com/wp-content/uploads/2020/06/home-01-01.svg

I added the css, (background-position: bottom; background-size: 100%; margin-bottom: -2px;) but that doesnt seam to do the trick either., it doesnt seam to be loading it:

Hi @logoglo,

You need to set !important to your margin-bottom css to make it work, to do that please go to X > Theme Options > CSS.

.home #x-content-band-4 {
	margin-bottom: -2px !important;
}

Without the CSS custom code:

With the CSS custom code:

Please note that custom development is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Hope that helps.

Thank you.

That did the trick! thanks!

Hi @logoglo.

It’s our pleasure to help you.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.