WIP: Lost of responsiveness when 'product gallery' has more than 1 image

Bugs
1

Issue URL: Unitech MS852B+ HC Barcode Scanner - E-Mage Technology
Browser: Chrome

Whenever the product gallery element has more than one image, the page/mobile responsiveness stops functioning as it should.

A comparison page where the product has only 1 image in its product gallery - Electronic Shelf Labels 5.65" - E-Mage Technology.

Simply use the Chrome Dev Tool/Mode to resize the page width and you’ll see the ‘Issue URL’ behaving incorrectly.

I’ve tested it with cache off, and no optimisation plugin running (Perfsmatters).
I really appreciate any help you can provide.

2

I see that in Chrome dev tools. When I refresh the page it shows correctly, but it is not responding real time.

3

Yes, that’s right, if adjusting the browser size it’s not going to respond properly, and only happens to ‘product_gallery’ with more than 1 image. I think it’s a bug in 1.9.1.

4

Hi,
Thanks so much for your report, and welcome to the forum!

I reproduced the issue and added it to our bug tracker. The width of the image doesn’t update on resizing the viewport.

However, you can work around the problem by adjusting the grid-template-columns of the wrapper a bit (instead of 1fr 1fr):

repeat(2, minmax(0, 1fr))

Best regards,
timmse

5

Thanks for checking.

I have applied ‘repeat(2, minmax(0, 1fr))’ as a temporary fix, unfortunately, it didn’t (completely) fix the issue.

E.g., Unitech MS852B+ HC Barcode Scanner - E-Mage Technology

I can wait for the next Bricks update, though, as users won’t see the problem until they resize the screen/browser size, anyway.

Thanks!

6

As far as I can see it works much better than before: CleanShot 2023-10-23 at 13.23.02 · CleanShot Cloud :smiley:

7

Unfortunately, it’s still far from usable or normal, though, in my opinion.

At the very least, it was behaving perfectly normally before the recent updates, that’s for sure.

Here’s my go: Loom | Free Screen & Video Recording Software | Loom

Thanks :slight_smile:

8

The number of images shown on the slider is not being reduced unless I refresh the page. What happens if you manually set the columns to 3 in the settings for the mobile breakpoint? Content Tab>>Thumbnails>>Columns

Update: Oh I see if you switch to slider it is the Max. Items. It works on all break points though.

9

On my test site, the slider images are always 4 and they move off the screen on the right as the screen gets smaller. The screen is not held out. The number of slides do not change, even if I refresh.

10

Hi timmse,

Regarding my video of the issue that still occurs/exists - Loom | Free Screen & Video Recording Software | Loom, could the upcoming update receive a fix for this problem by any chance, please? Thanks!