How can I resize images and adjust text spacing in multicolumn on mobile?

Store Design
, , , , , , ,

Topic summary

Goal: Customize the first multicolumn section on a Shopify product page to adjust image size and spacing, with changes scoped by device.

Requested changes:

  • Mobile only: reduce the image size.
  • Mobile only: decrease the vertical space between the title and the lower edge of the column.
  • Mobile and desktop: reduce the space between the title and the image.

Scope: The edits should apply only to the first multicolumn on the product page, not globally across the site.

Technical context: Likely requires CSS adjustments (e.g., media queries for mobile and targeted selectors to isolate the first multicolumn). HTML structure may influence selector strategy.

Assets: A reference image of the multicolumn is mentioned as context but not provided here.

Status: No solutions or code provided yet; the request is open and seeking guidance on how to implement the CSS selectors and spacing tweaks.

Summarized with AI on January 17. AI used: gpt-5.
1

hi,

On my product page I would like to edit images and text, only on the first multicolumn (image bellow)

  • Only on mobile, I want to reduce the size of the image

  • only on mobile, i want to reduce the space between the title & the lower edge of the column

  • On mobile & desktop I want to reduce the space between the title & the image

Thanks in advance for your help!

this is the multicolumn i’m talking