Thumbs showing up small on small screen

ah.. see the other post where I replied to you, earlier on in the post I added some css and mentioned what I do to get more control over stuff like this.

It’s because in the photoswipe settings in WP admin, the width of the thumbnails is set. This stops it being fully responsive.

I set the thumbnail width to 0 0 in the admin

Then add css

.psgal figure {
	width: 25%!important;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	padding: 2px!important;
}
.psgal figure img {
	width: 100%!important;
	height: auto!important;
	padding: 0px!important;
}
.psgal figure a {
	width: 100%!important;
	height: auto!important;
}

That forces the images to be responsive.

.psgal figure {
	width: 25%!important; }

is desktop 4 columns
You can set this at 100% for your mobile, then use media queries to set to 50% tablet and 33.333% desktop

You might also need to add

add_image_size( 'photoswipe_thumbnails', 400, 9999, false );
	add_image_size( 'photoswipe_full', 1800, 9999, false );

to functions.php if the 0 0 stops the thumbnails generating

ps if you use safari or chrome, right click and view the css, you can see it’s hardcoding the thumb sizes etc. Also safari has a responsive view on the develop menu

Hi sguk,

Thanks so much for all the instructions. I am very thankful for all the help.

First, per your instructions, I set the thumb sizes to 0 0 in the photoswipe settings.

That made the thumbs disappear.

But then I discovered that the rest of your instructions work no matter what the thumb size is in the settings.

So for small-screen css, I added this:

.psgal figure {
	width: 100%!important;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
	padding: 2px 0px!important;
}
.psgal figure img {
	width: 100%!important;
	height: auto!important;
	padding: 0px!important;
}
.psgal figure a {
	width: 100%!important;
	height: auto!important;
}

And now my thumbs are stretch edge-to-edge. Note: set the padding to 2px 0px!important; so there is no left and right padding to achieve the edge-to-edge look.

Again, thank you.

Brilliant! Glad it helped and you’re welcome. I know how frustration things can be when you sit for hours trying to get stuff to work!

Ps
I must have set 0 0 to give me more control over the thumbnail cropping, hence the other entries into functions.php (which you didn’t need)

Thanks a lot for providing support @sguk

Have you had a look at the latest version? https://github.com/thriveweb/photoswipe-masonry