Halo Theme - Mobile View Product Page Image and Collection Page Full Width

Store Design

Topic summary

Request for CSS adjustments in the Shopify Halo theme focused on mobile view. Goal: make the main product page image full width and reduce spacing between side-by-side images on collection pages.

Updates and clarifications:

  • Collection page images are already full-width on mobile; the remaining need is to close the gap between adjacent images.
  • The main product page image still needs to be made full width on mobile.

Requested review details:

Context and terms:

  • Halo theme: a Shopify storefront theme.
  • Collection page: product grid listing; “full-width” means the image spans the full mobile viewport width.

Attachments:

  • Two screenshots illustrate the current product image width and collection grid spacing; they are central to understanding the visual issue.

Status:

  • No CSS solution posted yet. Awaiting a review of the live site and specific CSS code to (1) make the product image full-width on mobile and (2) eliminate the gap between side-by-side collection images.
Summarized with AI on January 21. AI used: gpt-5.
1

Hi,

I am using the Halo theme and please need help with CSS code to make the main product page image full width and also the collection page images.

Any help will be greatly appreciated!

Thank you!

product.png
product.png500×800 208 KB

.

Coll pagbe.png
Coll pagbe.png500×800 178 KB

2

Hello @LeanneJ12

Please provide your store URL and, if it is password protected, please share the password so I can review it and provide a solution.

3

Hi there,

The web address is www.pictureperfectinteriors.co.uk

Thank you!

4

Hi again,

Sorry, I partly worded my request wrong regarding the collection pages in mobile view - the images are already full-width, I just need the code to close the gap between the images that are side by side, plus code to make the main product page image full-width in mobile view.

Thank you :slightly_smiling_face:

5

Hello @oscprofessional ,

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

Sorry, I partly worded my request wrong regarding the collection pages in mobile view - the images are already full-width, I just need the code to close the gap between the images that are side by side, plus code to make the main product page image full-width in mobile view.

Thank you.