Recently starting my journey with Bootstrap, I've included a screenshot of my progress below.
This is the CSS I'm using:
.snippet img{
width: 150px;
max-width: 100%;
height:auto;
}
@media(max-width: 767px) {
.snippet img{
width:100px;
float: right;
max-width: 100px;
height: auto;
margin-left: 10px;
margin-right: 10px;
}
}
Here's the HTML snippet:
<h2>About the venue</h2>
<div class="media-body snippet" >
<a class="pull-right" href="venue.php">
<img src="images/venue.jpg" alt="illustration"></a>
<p>this is the paragraph ... </p>
</div>
I want the image layout to be as shown in larger screens. However, on smaller devices, I aim for the text to wrap around the image nicely. How can this be achieved?
Your assistance would be greatly valued!