thumbnail gallery is resizing thumnails- why?

Hi Stu. The theme default styling for a gallery is:

.entry .gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-width: 1px 2px!important;
  border-color: transparent!important;
}

So, depending on how many columns you configure, the images are expanded or contracted to fill the column width, and the height is scaled proportionately. You could override that by setting a specific width in your child theme css, but then you may end up with extra spacing between the images.

Hi again bdbrown, thanks for your help. I wondered if it was a theme thing. I don’t mind the spacing. I would just like them to stay the width I choose in the gallery settings. How would I change that code to achieve that. Then I can just choose the appropriate size in the gallery settings. Is this an attempt to be responsive. If it is, is there a way to say: if there is space use the selected size but don’t enlarge, but if space is limited then shrink the image to fit the width of the container. So it is responsive but only when there is not enough space such as a smaller screen.
Thanks again
Stu

Is this an attempt to be responsive.

Yes. If you don’t override the default css it won’t matter what size you select for the gallery image; the default css will always set it to fill 100% of the width of the container (column).

So it is responsive but only when there is not enough space such as a smaller screen.

You might be able to achieve that by using one or more media queries. For instance, you could set the default width you want, say 150px, using css in a child theme or css plugin like Simple Custom CSS. So, on a desktop view, the images would be 150px wide with the rest of the column widths filled out as spacing between the images. Then pick a breakpoint of say 768px (which is common for a tablet in portrait mode), and create a media query that sets the image width to 100%. I haven’t tested this but I think the images should stay at 150px wide, with the resultant spacing, until the viewport reaches the point you set in the media query. At that point the images would be expanded to 100% of the column width and would be responsive as the screen narrows.

Hey bdbrown, thanks for your help. I feel like a bit of a cheat but in the end I went for a gallery plugin that sorted all the problems. Thanks for you time.
stu

If a plugin solves your problem, and you’re satisfied with the results, then that’s the solution you should use. Glad if I could help. If you don’t need any further assistance here then please mark the topic as Resolved. Thanks.

Thanks