Make image bigger

Store Design
, , , , , ,

Topic summary

A Shopify store owner seeks CSS code to make product images on mobile extend fully to the header, eliminating surrounding blank space. They provide their store URL and reference images showing the desired layout.

Solution Provided:
A helper provides custom CSS to be added to assets/section-main-product.css, which:

  • Makes the header transparent
  • Positions product images to stretch beneath it
  • Adjusts z-index and positioning for mobile screens (max-width: 749px)

Follow-up Adjustments:

  • Zoom icon repositioning: Additional CSS moves the magnifying glass to the bottom-right corner while keeping zoom functionality intact
  • Gap fix: A small space appears between the announcement bar and menu after initial implementation, resolved with further CSS targeting the menu-drawer element with negative top positioning

Outcome:
The issue is successfully resolved through iterative CSS adjustments. The original poster confirms satisfaction with the final result, which includes full-width product images, repositioned zoom controls, and proper header/menu alignment on mobile devices.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hey all,

is there any CSS code I can implement to make my product image on mobile stretch up to the header and remove any blank space surrounding it (like the images below)

Any help would be unreal.

My URL: https://project-thirteen.com.au

IMG_1307.PNG
IMG_1307.PNG1170×2532 387 KB

IMG_1310.PNG
IMG_1310.PNG1170×2532 220 KB

IMG_1311.PNG
IMG_1311.PNG1170×2532 308 KB

2

@projectthirteen

Have you want make it like this?

VIEKIN_0-1723602109377.png
VIEKIN_0-1723602109377.png590×1284 336 KB

1 Like
3

Yes, exactly like that.

4

Thanks for getting back to me, what code did I need to put in @DitalTek ?

5

@projectthirteen

Thank you have been patient!

You can add this code to assets/section-main-product.css file:

How to find to that file? you can go to Admin → Online Store → Themes → Customize Code → Assets:

@media screen and (max-width: 749px){
  .section-header.shopify-section-group-header-group {
      z-index: 3;
      position: absolute;
      top: 55px;
      width: 100%;
   }
   .section-header.shopify-section-group-header-group .gradient {
      background-color: transparent;
   }
}

If you have further question, feel free to ask me!

1 Like
6

Thanks @DitalTek , this worked although is it possible to move the magnifying glass to the bottom left hand side or make it invisible yet allow zoom when users click on the image?

Thanks

7

@projectthirteen

To do that you can move the zoom icon to right bottom with this code:

@media screen and (max-width: 749px){
.section-header.shopify-section-group-header-group {
      top: 55px;
}
.media-type-image .product__media-icon {
  top: auto;
  left: auto;
  right: 3.2rem;
  bottom: 2.2rem;
}
}

This is result:

VIEKIN_0-1723712250939.png
VIEKIN_0-1723712250939.png600×1100 333 KB

1 Like
8

Thankyou @DitalTek , there now seems to be a slight gap between the announcement bar and the menu, is this fixable?

IMG_1381.PNG
IMG_1381.PNG1170×2532 160 KB

9

Yes, you can try this code:

@media screen and (max-width: 749px){
  .section-header.shopify-section-group-header-group.menu-open {
      z-index: 99;
   }
   .section-header.shopify-section-group-header-group.menu-open #menu-drawer {
      top: -55px !important;
   }
}

This is result:

VIEKIN_0-1723732631526.png
VIEKIN_0-1723732631526.png722×1288 61.5 KB

1 Like
10

Thankyou very much for your help @DitalTek

11

You are welcome :hugs: