How to fix white space issue on mobile product page?

Store Design
1

IMG_4114.png
IMG_4114.png1284×2778 256 KB

Hi, I hope you’re all well

On the product page there is a block of white space when you zoom out on the right hand side but this is only happening on mobile devices

I have attached a screenshot below

I’ve had this issue for a while and I haven’t managed to sort it out. Could anybody help?

Thank you

@KetanKumar

Url: https://thescentmaster.co.uk

2

Hi @TheScentMaster ,

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

3

Thank you for responding! It works on the products which have one photo

However products with multiple photos it has the same issue, I will attach screenshot below with the link

URL: https://thescentmaster.co.uk/products/after-effect

IMG_4118.PNG
IMG_4118.PNG1284×2778 256 KB

4

@theycallmemakka

5

Hi @TheScentMaster ,

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

6

@theycallmemakka Thank you so much, this has worked!

7

@theycallmemakka Hi, i hope you’re well, i added some custom css for maquee announcement bar & the page width has gone like this - i will attach screenshot

When you zoom out on mobile phone there’s so much space

How can I sort this out please

URL: https://thescentmaster.co.uk

IMG_4134.png
IMG_4134.png1284×2778 222 KB

Thank you

8

Hi @TheScentMaster ,

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag
9

@theycallmemakka Thank you for getting back to me. This code begins to resize to the mobile device screen as you refresh the page. The same issue is occurring

10

Hi @TheScentMaster ,

Try adding this code to theme.liquid
11

@theycallmemakka Thank you so much this works perfectly!