Bloxx gallery doesn't show gallery on smaller phones

Exhibeo
1

Heading explains it all really. It seems to affect iPhone 8, iPhone SE and the like. Larger pads and computers are not affected. Any suggestions to what is happening?

Latest Bloxx version is being used.

https://7seascharter.net/travels.html

Jon

2

Hi Jon,

It looks like the thumbnails are too large for narrow screens.

You can see this happening on the Mac version of Safari if you display the sidebar and then reduce the size of the window. If you shrink it so that it is narrower than the thumbnail width, the gallery disappears. Alternatively (perhaps easier) view it in Xway’s Web view and shrink the size of the view by resizing the Inspector panel.

You could try using a smaller thumbnail size (Thumbnail Scale in Document Settings).

However, it’s possible that this is something that the Bloxx CSS file could deal with. There is a media query that looks like it is supposed to adjust widths on narrow screens, but it is commented out and I’m not sure that it works correctly.

@simonmanning might be able to shed some more light on this.

3

Hello, I really don’t want to make the thumbnails smaller. Initially I wanted them bigger, but Bloxx didn’t allow that. I also tried using flexbox to put 2 side by side to allow for smaller size thumbnails, but same result unfortunately.

Jon

4

Could there be a way of inserting a smaller gallery thumbnail at a given break point?

Jon

5

You should be able to fix this by adding a media query. You can do this by adding some CSS markup in the Page Inspector in Xway. The following markup works for me:

@media screen and (max-width: 480px)
{
#galleryID-bloxx-grid-wrapper .bloxx-thumb
{
	width: 197px;
}

#galleryID-bloxx-grid-wrapper .bloxx-thumb img
{
	width: 197px;
}
}

You need to replace galleryID with the ID of the gallery in Xway.

An alternative solution, which you might want to use if you have multiple galleries on a page, is to use the following markup:

@media screen and (max-width: 480px)
{
.bloxx-thumb
{
	width: 197px !important;
}

.bloxx-thumb img
{
	width: 197px !important;
}
}

This doesn’t require you to specify the gallery ID. I used it in the first example because that’s how it’s specified in the gallery CSS file, and not specifying it in the markup means that the markup rules have a lower “specificity value” and therefore don’t override the markup that is in the CSS file. Adding !important fixes this.

There is one remaining problem, which is that if you change the width of a browser window while the gallery is displayed, the layout becomes confused. I think that is probably caused by the way the JavaScript code for this gallery is written.

6

As there are multiple galleries I went for the second version of your suggestions. Save for the little layout confusion (which I don’t think is too much of a problem since people use one or an other device, not changing size while watching) it seems to work quite well. All hail to you.

https://7seascharter.net/travelsb.html

I’d appreciate very much if you could have a look on one or two of your smaller devices, too, and let me know what you think.

In anticipation, thanks so much, Jon

7

It works fine on my iPhone 12.

A convenient way to test how responsive layouts will look on different devices is to choose Enter Responsive Design Mode from Safari’s Develop menu:

The layout confusion that occurs when the device width changes is somewhat annoying, because it also happens when a user switches from portrait to landscape orientation. I found that I could get the page to display correctly by reloading it after this happens. It may be possible to get this happen to automatically, by adding some JavaScript that detects when the viewport size has changed (ideally, it should only do this when it crosses the breakpoint threshold). I’m not a JavaScript programmer, and I don’t have time to look into this right now — but if no one else jumps in with some code I’ll see if I can come up with something.

8

Ok, it is not perfect, but will do for now. Hopefully somebody will come up with a better solution later.

Regarding different viewports I’m using Viewport Resizer with Firefox which is quite a handy tool.

Thank you,

Jon