I need to create a page that displays text alongside an image. However, when the window size is minimized, the image overlaps with the text.
Here is how it looks:
To fix this issue, I am using the following HTML code:
<div class="header1">
<div class="col-md-8">
<h4 class="hedtext">Name</h4>
</br>
<h4 class="hedtext">Address</h4>
</br>
<h4 class="hedtext">Contact Number</h4>
</br>
<h4 class="hedtext">Fax</h4>
</div>
<div class="col-md-4">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="pull-right img1">
</div>
</div>
And here is the corresponding CSS:
.hedtext {
padding-top:10px;
margin-bottom: -19px;
line-height: 2pt;
font-size: 13px;
font-weight: 750;
float: left;
}
.header1 {
border: 1px solid black;
height: 150px;
}
.img1 {
width: auto;
height: 130px;
padding :10px;
}
I am using Bootstrap 3 and my goal is to ensure that the image stays side by side with the text even when the window is minimized.