Make image bigger

[projectthirteen]

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

[DitalTek · Accepted solution]

@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!

[DitalTek · Accepted solution]

@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:

[DitalTek]

@projectthirteen 

Have you want make it like this?

[projectthirteen]

Yes, exactly like that.

[projectthirteen]

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

[DitalTek · Accepted solution]

@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!

[projectthirteen]

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

[DitalTek · Accepted solution]

@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:

[projectthirteen]

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

 

[DitalTek · Accepted solution]

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:

[projectthirteen]

Thankyou very much for your help @DitalTek 

[DitalTek]

You are welcome 🤗