csswordpressvisual-composer

How to make four boxes in two rows without any gaps in visual composer WordPress?

I want to make four boxes in two rows. There will be no padding/gap between two rows. Entire section will be stretched.

Example of the boxes is as below : There are four boxes in two rows and each row has no space between them; all are attached together.

How to gain this ? Please help. Thanks in advance.

This is how I can did, but still there are lot spaces between each row

Solution

  • You can do this by adding CUSTOM HTML module in VC, and then using flex 

    html, body {
  height: 100%;
  margin: 0;
}
.grid2x2 {
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.grid2x2 > div {
  display: flex; 
  flex-basis: calc(50% - 0px);  
  justify-content: center;
  flex-direction: column;
}
.grid2x2 > div > div {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.box { margin: 0px; }
.box1 { background-color: red; }
.box2 { background-color: orange; }
.box3 { background-color: purple; }
.box4 { background-color: grey; }
    <div class="grid2x2">
  <div class="box box1"><div>one</div></div>
  <div class="box box2"><div>two</div></div>
  <div class="box box3"><div>three</div></div>
  <div class="box box4"><div>four</div></div>
</div>