Making the thumbnail grid responsive – a simple example.

To make the thumbnail grid resize with the page, you will need to override the existing styles. You should not set the height and width in the short code. Instead,  you should use custom css to override the current styles.

I overrode the styles for this post specifically by creating a div with a class called “myclass”. You can also check the body tag of the html for the post to find the unique id.  In this case, the unique id is postid_790.

I created custom css for the thumbnail grid in my unique class.

CSS:

.myclass .griditemleft {
    max-width:150px;
    width:30%;
    height:auto;
    padding:1px;
}
.myclass .postimage, .myclass .postimage img {
    width:100%;
    height:auto;
}
.myclass div.postimage-title {
    width:100%;
}

HTML:


 I wrapped the grid in a <div class="myclass"></div> tag using the text editor.
[thumbnailgrid cat="41" aligngrid="autocenter"]

Result: