This is CSS code customization work Please hire a Shopify expert who can help you!
Thanks!
Topic summary
Goal: Make the main product image full-width on mobile by removing padding on a Shopify product page (store link and reference images provided).
Most recent update: A concrete CSS fix was shared. Steps: Online Store > Themes > Edit code > open base.css and add a mobile-only media query (max-width: 749px) targeting .slider-mobile-gutter .product__media-list .product__media-item to set width: 100% and margin: 0 (with !important) so the image spans full width on mobile.
Other input: One reply noted this is a CSS customization and suggested hiring a Shopify expert.
Status: No confirmation from the original poster that the CSS resolved the issue; outcome unconfirmed/ongoing.
Notes:
- The shared images are for visual reference of the desired layout.
- Technical context: A CSS media query applies styles only on screens up to 749px wide to adjust the product media item’s width and remove padding/margins on mobile.