Make Mobile View Product Page Image Full Width & Reduce Image Gap on Collection Page

Shopify Discussion
1

Hi,

I am using the Halo theme and need help please with CSS code to make the main image on the product page full-width and also code to narrow the column gap between the products on the collection pages.

I also please need code that will help me increase the font size of the main menu in mobile view.

The web address is www.pictureperfectinteriors.co.uk.

Untitled design (8).png
Untitled design (8).png600×600 368 KB

Copy of Untitled.png
Copy of Untitled.png600×600 305 KB

Many thanks,

Leanne

2

Hi @LeanneJ12 ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

I hope it will help you.

Best regards,

Anthony

3

Hi Baea_Anthony,

Thank you so much for your help, that has fixed my product page image and main menu in mobile - just wondered if you had code to also make the mobile view sub-menu of COLLECTIONS the same font size?

Any idea about code to narrow the column gap on the mobile view collection pages?

Thanks again!

Leanne

4

Yes, you can try this code below: