How to make responsive web using inline-block

I would like the P element to always be at the bottom and I have images with different sizes, but I would like to have the images inside DIV elements that are rectangle and same size irrespective of the dimension of the images. I noticed that when viewed on 900+px it seems to be okay, but when the viewport becomes say 500px, it starts to flow naturally(default browser) instead of being conditioned by my CSS. In order to create table I used inline-block value, and I set the DIV to 30%

Code:

* {
  margin: 0;
  padding: 0;
}
ul al {
  list-style: none;
}
body {
  font-size: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.2;
}
.m-body {
  width: 920px;
  margin: 0 auto;
}
.m-section {
  margin: 5px auto;
}
.col-1-1 {
  width: 30%;
  height: 40%;
  border: 1.3px solid #8f8f8f;
  vertical-align: top;
  display: inline-block;
  margin: 0 1.2px;
}
.col-1-1 {
  position: relative;
}
.mm-robo2 {
  position: absolute;
  bottom: 0px;
}
.mm-robo1 {
  width: 100%;
}
.m-odd {
  background-color: aqua;
}
@media only screen and (max-width: 480px) {
  .col-1-1 {
    margin: 1% 0% 1% 0%;
  }
  .col-1-1 {
    display: block;
    vertical-align: none;
  }
}
<div class="m-body">
  <div class="m-header">
    <p>Let's take this bold move.... It is in us!</p>
  </div>
  <div class="m-section ">
    <div class="col-1-1  m-odd">
      <a href="#">
        <img class="mm-robo1" src="robo_link_a_20.jpg" alt="Robo Link">
        <br>Robo Link
      </a>
      <div class="mm-robo2">
        <p>My way, my message!</p>
      </div>
    </div>
    <div class="col-1-1">
      From</div>
    <div class="col-1-1 m-odd">
      House</div>


  </div>
  <div class="m-footer"></div>



</div>


Source: html

Leave a Reply