make div with image and text responsive css and bootstrap - html

Question

I have placed an image and text over the div with background as below
The CSS done for this is as below
#image_container {
background: url('images/1.jpg') no-repeat;
max-width:100%;
height:auto;
text-align: center;
padding: 30px;
margin: 10px;
box-sizing: border-box;
}
.main_image {
height: 220px;
margin:-5px;
}
.text {
padding: 5px;
}
.ltext {
margin-top: -5px;
}
and HTML markup is as below
<a href="blog/<link to post>" style="color:inherit">
<div class="col-sm-4">
<div id="image_container" class="">
<img src="images/blog/1.jpg"
class="main_image" alt=""/>
<div class="text">
<img src="images/dot.png" class="col-sm-12 col-xs-12 col-md-12
col-lg-12" alt="divider" style="max-width:100%"/>
Mouting Memories
<p class="ltext">
<?php echo date('l', $time).', '.date('F', $time).' ' ?><?php echo
date('d', $time).', '.date('Y', $time);?>
</p>
</div>
</div>
</div>
</a>
But with above approach the inside image and text is not getting displayed properly on screen size chnage.It is getting displayed as here
Please help.

Answer 1

#image_container {
background: url('blogpost_bg.jpg') no-repeat;
max-width:100%;
height:auto;
text-align: center;
padding: 30px;
margin: 10px;
box-sizing: border-box;
background-size:100% 100%;
}
.main_image {
height: 220px;
margin:-5px;
}
.text {
padding: 5px;
}
.ltext {
margin-top: -5px;
}
Add background-size:100% 100%; to your CSS for the #image_container
Your HTML and PHP
<a href="blog/<link to post>" style="color:inherit">
<div class="col-sm-4">
<div id="image_container" class="">
<img src="images/blog/1.jpg"
class="main_image" alt=""/>
<div class="text">
<img src="images/dot.png" class="col-sm-12 col-xs-12 col-md-12
col-lg-12" alt="divider" style="max-width:100%"/><br>
Mouting Memories
<p class="ltext">
<?php echo date('l', $time).', '.date('F', $time).' ' ?><?php echo
date('d', $time).', '.date('Y', $time);?>
</p>
</div>
</div>
</div>
</a>
Add a <br> after the image (<img>) so the test is forced to the next line even if it has enough space to fit on the same line as the image
Also your PHP isnt very good.
It should rather be
<?php echo date('l, F d, Y', $time);?>
That's the quick way to do it. The better way to do it is to use CSS for the background instead of that image you have used because that image stretches and pixelates. See below for better CSS using -webkit-box-shadow,-moz-box-shadow and box-shadow instead of a background image.
#image_container {
-webkit-box-shadow: 2px 2px 17px 5px rgba(0,0,0,0.37);
-moz-box-shadow: 2px 2px 17px 5px rgba(0,0,0,0.37);
box-shadow: 2px 2px 17px 5px rgba(0,0,0,0.37);
max-width:100%;
height:auto;
text-align: center;
padding: 30px;
margin: 10px;
box-sizing: border-box;
}
Looks cleaner with that CSS