Thumbs showing up small on small screen

Ali.T.
(@polaatx)

5 years, 4 months ago

Hello, I have an issue with the size of the photoswipe masonry thumbs showing up way too small on small screen, with too much padding on both sides.

When testing on desktop for small screen, they look fine:

But on a Nexus 6 phone in Chrome on this page: http://escapefromtehran.com/people-of-iran/from-manual-labor-to-tourism-boss/

They appear way smaller, with plenty of margin on left and right:

I’ve been banging my head trying to figure this out. Do you have any idea why this is happening?

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

sguk
(@sguk)

5 years, 4 months ago
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
sguk
(@sguk)

5 years, 4 months ago

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
Thread Starter Ali.T.
(@polaatx)

5 years, 4 months ago
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.
sguk
(@sguk)

5 years, 4 months ago

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)

Plugin Author THRIVE – Web Design Gold Coast
(@deanoakley)

5 years, 4 months ago

Thanks a lot for providing support @sguk

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

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

The topic ‘Thumbs showing up small on small screen’ is closed to new replies.

Views