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%. My Question: How do I make the below code to be responsive web compliant? That is being able to responsive reasonably to different viewports.
*{
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; }
}<html>
<head>
<meta charset="utf-8" lang="en">
<title>Test</title>
</head>
<body>
<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>
</body>
</html>