0

I would like to know how to eliminate the gap that is left between two columns. Once the site is viewed on mobile the gap can be shown (Image 2). I created the row with 1/2 + 1/2 columns, it appears perfectly at a desktop resolution but on mobile the 2nd column slides beneath the first, leaving a gap between the two (marked in red, 2nd image).

Current Row options are as follows: stretch row, 0px column gap, content position top. I haven't made any further changes other than the ones I described above

I have tried settings the top and bottom margin to 0px on both columns, same result.

Again, I have checked all the options and I'm starting to think this is going to require some custom CSS. Anyone that has experience with Visual Composer for WordPress, do you know how to fix this issue?

Normal Row set as 1/2 + 1/2 columns

How it appears on a desktop

How the columns leave a gap when on mobile

TylerH
  • 20,799
  • 66
  • 75
  • 101
JCrush
  • 25
  • 1
  • 3

2 Answers2

1

If you can target the specific divs.

First column:

.wpb_content_element {
margin-bottom:0;
}

Second column:

Set padding-top:0; on .vc_column-inner

<div class="wpb_column vc_column_container vc_col-sm-6">

Set it's margin-top: 0;
Carol McKay
  • 2,438
  • 1
  • 15
  • 15
  • Visual Composer allows me to edit the column margins though, ill try this and see. – JCrush Jul 10 '16 at 03:16
  • doesn't seem to get rid of the gap entirely, here is what applied so far: .vc_column-inner { margin-top:0 ; } .wpb_content_element { margin-bottom:0; } .wpb_column .vc_column_container .vc_col-sm-6 { margin-top: 0px; } .vc_column-inner { padding-top:0; } – JCrush Jul 10 '16 at 04:59
0
.wpb_column.vc_column_container.vc_col-sm-6 { 
margin-top: 0px; 
}

because these classes are all on one div you can try one or more of them to affect the outcome, but without spaces (see how I have crammed them together) but can you target only the ones you want as this is throughout the theme?

Carol McKay
  • 2,438
  • 1
  • 15
  • 15