HTML – Responsive grid with different sized image thumbnails and text attached above

  • Home / Blog / HTML – Responsive…

HTML – Responsive grid with different sized image thumbnails and text attached above

I’m trying to fix the following CSS / MarkDown / HTML code so that it’s responsive on mobile devices and small web browsers.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
.thumbnail1 {
    background-color: black;
    height: 200px;
    display: inline-block; 
    background-size: cover; 
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

<style>
.thumbnail2 {
    background-color: black;
    height: 230px;
    display: inline-block; 
    background-size: cover; 
    background-position: center center;
    background-repeat: no-repeat;
}
</style>

### Book

<p style="font-size: 11.5pt; width: 47%; text-align: left; margin-right: 3%;">"<a href="Book link">Book Title</a>." Under contract with <b><i>Publisher</i></b> (w/ coauthor 1 & coauthor).<br><a href="link for Book image"><img src="image source file for Book" class="thumbnail1" style="max-width: 100%;"></a></p> 

### Peer-Reviewed Articles 

<p style="float: left; font-size: 11.5pt; text-align: left; width: 47%; margin-right: 3%; margin-bottom: 0.5em;">"<a href="article 1 link">Article 1 Title</a>."<b><i> Article 1 Journal</i></b> (w/ coauthor).<a href="Article 1 link"><img src="image source file for Article 1" class="thumbnail1" style="max-width: 100%;"></a></p>
<p style="float: right; font-size: 11.5pt; text-align: left; width: 47%; margin-left: 3%; margin-bottom: 0.5em;">"<a href="Article 2 link">Article 2 Title</a>."<b><i> Article 2 Journal</i></b> (w/ coauthors).<a href="link for Article 2 image"><img src="image source file for Article 2" class="thumbnail2" style="max-width: 100%;"></a></p> 
<div style="clear:both"></div>

It works perfectly on the computer, generates the following perfectly drawn lines and images:

However, on a mobile device or with a half-sized internet window, everything is scored and does not line up well according to these lines.
Enter the pictorial description here

How do I change the code so that the grid can only be converted to a tile on a mobile tool or a narrow web browser – that is?
Enter the pictorial description here

Write a Comment

Your email address will not be published. Required fields are marked *

x