Return to previous page

In the mobile version, the page layout breaks after selecting a product variant

This topic has 12 replies, 2 voices, and was last updated 1 months ago ago by Luca Rossi

hafunerix

Participant

September 24, 2025 at 10:03

I noticed that in the mobile version, the page layout breaks when selecting a product variant.

This issue only occurs on the mobile version and specifically when the product has two selectable variants, e.g., color and size.

After opening the product page (Chrome, mobile) , try to swipe one image in the gallery, then scroll down and choose any product variant — the page layout will break, creating a large empty white space:

https://postimg.cc/8JXnQBgX

Unfortunately, this negatively impacts conversion. The user becomes confused and may lose the willingness to continue shopping…

Please help me solve this problem

#455725 Copied

11 Answers

Luca Rossi

Support staff

September 24, 2025 at 11:32

Hello @hafunerix,

Could you please disable the sticky column that contains the product gallery?

We would appreciate it if you could let us know once this has been done.

Best regards,
The 8Theme Team

#455741 Copied

hafunerix

Participant

September 24, 2025 at 17:46

Thank you for your reply. If it’s this feature:

https://postimg.cc/hfNCW06Y

Disabling it didn’t change anything.

#455801 Copied

Luca Rossi

Support staff

September 25, 2025 at 09:11

Dear @hafunerix,

We were unable to reproduce the reported issue on our test device.

For your reference, please review the following video: (https://drive.google.com/file/d/10HegA1_2x24311B2NP4sTFIbLyhT0KJ8/view?usp=sharing).

Should you continue to experience difficulties, please let us know so we can assist you further.

Best regards,
The 8Theme Team

Files is visible for topic creator and
support staff only.

#455840 Copied

hafunerix

Participant

September 25, 2025 at 09:26

As I mentioned earlier, the problem only applies to products that offer at least two variants to choose from, not just one.

For example:

– color
– size

Examples of such products:

https://smartic.pl/produkt/buty-dla-psa-wodoodporne/

https://smartic.pl/produkt/bezpieczne-szelki-dla-psa-odblaskowa-kamizelka/

https://smartic.pl/produkt/szelki-dla-psa-bezuciskowe-z-uchwytem/

#455844 Copied
Luca Rossi

Support staff

September 25, 2025 at 11:35
Hi @hafunerix,

Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

@media (max-width: 600px){ .thumbnails-list .active-thumbnail span.pswp-additional { max-height: 150px; } }

Kind regards,
The 8Theme Team
#455867 Copied
hafunerix

Participant

October 7, 2025 at 18:57

Thank you.

The code helped, but now after performing the same action—swiping between photos in the gallery and then selecting a product variant thumbnail—the first photo in the gallery disappears. This also happened before (before adding the code):

https://postimg.cc/v15XCxFB

#456669 Copied

Luca Rossi

Support staff

October 8, 2025 at 07:57

Dear @hafunerix,

Could you please send us the URL of those products are having the issues?

Thank you!

#456694 Copied

hafunerix

Participant

November 4, 2025 at 14:04

Of course. Open these pages using Google Chrome in mobile mode. First, scroll through the gallery and then select a product color to see the issue. This applies to any product page that has more than one variant to choose from.

Please contact administrator
for this information.

#458741 Copied

Luca Rossi

Support staff

November 4, 2025 at 17:48

Hello @hafunerix,

Here is how it appears on our side:

https://www.awesomescreenshot.com/video/46013993?key=46f45c7135e558d6bca1de031639ff4f

Could you please share a screen recording as well?

Best regards,
The 8Theme Team

#458777 Copied

hafunerix

Participant

November 4, 2025 at 18:05

The problem occurs when you first move the photo in the gallery (slider).

Then scroll down and select a variant.

#458779 Copied
Luca Rossi

Support staff

November 5, 2025 at 07:38
Hi @hafunerix,

Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

@media (max-width: 600px){ .swiper-vertical-images .vertical-thumbnails-wrapper li img { max-height: 150px; } }

Kind regards,
The 8Theme Team
#458802 Copied
Viewing 12 results - 1 through 12 (of 12 total)