Docs

[John S]

In visual composer, I split the content band into two columns. Then put a content band in each of the columns in order to set background images that I would like to have side by side, with no gap. Trying to go for a stacked photo look with content inside.
I looked at a couple other posts and tried the recommendations of adding custom css in the customizer. The columned background images still had gaps in between them.
How do I completely remove gaps in between columns?

Thanks in advance!

[Christopher]

Hi there,

To remove gap between columns add this code in Customize -> Custom -> CSS:

.x-column{
margin-right:0;
}

Hope that helps.

[John S]

Thank you for your response!

I inserted the snippet of code you provided and it did remove the gap in the center, however it made a gap on the far right of the columns. I have 2 rows on top of each other and each of those rows have 2 columns. I have a total of 4 container area with images in them. Just want them side by side and spanning evenly across the whole screen.

If need be I can rethink the layout design I am going for.

I apologize for being a pain. 🙂

[Darshana]

This reply has been marked as private.

[John S]

Thanks, it should be veiwable now.

[Christian]

Hey John,

In addition to the CSS given previously, please add the code below in the Appearance > Customize > Custom > CSS

.x-column.one-half {
width: 50%;
}

That’ll affect all half columns sitewide however. If you want it to affect that column only, add a class to your row or content band like no-space (see http://prntscr.com/5j7qty) then use the CSS below instead.

.no-space .x-column.one-half {
width: 50%;
}

You can change no-space class name to any name that best describes the style.

Hope that helps. 🙂

[John S]

Worked like a charm!

You all are brilliant!

Thanks again!

[Rubin]

You’re welcome!

[John S]

Ok, somethings not right now.
I completely redid the homepage and made the same design layout as stated earlier in this thread.
I want to achieve the same look as talked about above.

I set up 2 rows on top of each other with no margin. Then split each of the two rows into two columns. In each column I added a row so I could set the background image for each of the four “image boxes”. On top of or in the background image I added a text element to add text.

When doing that with no css it appears on the webpage as four images with text in the center stacked on top of each other, but with a gap in the middle of the two columns.

When I set a class of no-space to the rows and then add the code that was provided above in the customizer, it then appears on the webpage as four images with text in the center stacked on top of each other, but with a similar sized gap on the right side of the columns instead of in the center.

And it also pushes some areas of text I have elsewhere on the page and site towards the left.

I just would like those images stacked, even, and center. on the other elements on the page to be where they should be. I hope I explained it well enough, but wasn’t too long winded.

Please take a peek and see if you can pinpoint the issue. You will see the stacked images and issue easily and most likely know the look I’m going for right away.

Take a peek here: http://pointwebsitedesign.com/

I know you will figure it out so thanks in advance! 🙂

[Friech]

Hi there,

This could be achieve with a classes, and in the same time making sure it would not affect any other element. I see that you have an inline styles on your text <p style="text-align: center;">paragraph</p>.

Instead of inline style use a class. For example, for all of your left text you could use something like <p class="lefty">paragraph</p> and another class for all of your text on the right <p class="righty">paragraph</p>.

And then just add this is CSS under Custom > CSS in the Customizer.

.righty {
text-align: left !important;
padding-left: 40px;
}
.lefty {
text-align: right !important;
padding-right: 40px;
}

Let us know if there’s anything not clear. Cheers!

[Author]

Posts