CODEWITHSUNDEEP
csshtml
jezz
jezz

Reputation: 99

How to make responsive two overlapping columns

Hi guys can you help me how to create a the design I made in Photoshop. I actually used col-md-6 to make it two columns. but the problem is that making on div height is bit taller than the other. Here is the image I am talking about 

<div class="col-md-6" class="white">
     <h1>LOGISTIC</h1>
</div>
<div class="col-md-6" class="ship">   
</div>
<div class="col-md-6" class="black">
     <h1>DELIVERY</h1>
</div>
<div class="col-md-6" class="pipe">    
</div>
<div class="col-md-6" class="white">
     <h1>STORAGE</h1>
</div>
<div class="col-md-6" class="tank">
</div>

css

.ship{
background: url(../img/resources/ship.png);
}

.tank{
background: url(../img/resources/tank.png);
}

.pipe{
background: url(../img/resources/pipe.png);
}

Please Help I am stock here, thanks in advance

Upvotes: 0

Views: 68

Answers (1)

jl_
jl_

Reputation: 5539

Make sure that you specify the height in all your classes below: 

.ship{
     height: /*set the height of ship.png*/
     background-image: url(../img/resources/ship.png);
}

.tank{
     height: /*set the height of tank.png*/
     background-image: url(../img/resources/tank.png);
}

.pipe{
     height: /*set the height of pipe.png*/
     background-image: url(../img/resources/pipe.png);
}

Upvotes: 1

Related Questions