Gallery thumbnails too large

You would probably have to look at each media query and adust the max size like this code.

@media (min-width: 600px)
.wp-block-gallery.columns-4 .blocks-gallery-image, .wp-block-gallery.columns-4 .blocks-gallery-item {
    width: calc((100% - 16px * 3)/ 4);
    margin-right: 16px;
    max-width: 23%;
    height:auto;
}

if you are going to adjust the thumbnail size in functions.php you might want to add the plugin regenerate thumbnails and let it regenerate all your thumbnails. https://wordpress.org/plugins/regenerate-thumbnails/

• This reply was modified 7 years, 4 months ago by mrtom414.

the max-width will keep it from expending all the way across the page. since there are 4 images on the level when it above 600px you will need to keep the li items to below 1/4 the size of the overall length. if there where 3 images across you would have to make it less then 1/3 and so on. I set the max width to 23% because there is a margin added to the image to form the gap between images.

if you adjust each of the media queries by adding the max-width: you should be close. You should be able to add something to customize additional CSS.

@media (min-width: 600px){
.wp-block-gallery.columns-4 .blocks-gallery-image, .wp-block-gallery.columns-4 .blocks-gallery-item {
    max-width: 23%;
    height:auto;
}
}