Responsive thumbnails | ww.wp.xz.cn

tdtdtt
(@tdtdtt)

11 years, 3 months ago
Hi,

I would like the thumbnail size to be set based on the browser window so that if i have a row of 3 images, these 3 images always stay on the same row but scale down to fit. Is this possible to do? Is there an additional plugin that I need?

I tried adding the following code to my css as suggested in a previous post but this locked the height of the thumbnails and only altered the width meaning i had 2 cropped images to the left and one non-cropped image to the right
```
.ngg-gallery-thumbnail-box {
	float: left;
	width: 30%;
}
```
Would appreciate any advice,
Thank you!

https://ww.wp.xz.cn/plugins/nextgen-gallery/

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Contributor photocrati
(@photocrati)

11 years, 3 months ago

@tdtdtt – If you want to add custom CSS that only works in small viewport sizes then you will likely also need to ensure you are using the appropriate media queries as well in your CSS definitions.

Thanks!

– Cais.
Thread Starter tdtdtt
(@tdtdtt)

11 years, 3 months ago
Hi Cais,

Thank you but could you explain what you mean in a bit more depth?

I’m now trying to use the following code which works on a typical image
```
.ngg-gallery-thumbnail-box {
    float: left;
    width: 30%;
    max-width:360px;
    height:auto;
}
```
This still has no effect on the height, i want the height and width to scale down relative to the browser window size. It seems there must be another rule overwriting mine but I can’t work out where this is?
Plugin Contributor photocrati
(@photocrati)

11 years, 3 months ago

@tdtdtt – You can search on “CSS Media Queries” and get links like this:

– https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
– http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Those should get you started.

– Cais.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Responsive thumbnails’ is closed to new replies.

Tags

3 replies
2 participants
Last reply from: photocrati
Last activity: 11 years, 3 months ago
Status: not a support question