Product images not staying centered when in mobile or resizing window :(

KetanKumar
Shopify Partner
14186 1652 5101

@schmase 

Yes, please try code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product {
    max-width: 768px;
    margin: 0px auto;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
schmase
Tourist
8 0 1

@KetanKumar 

 

I have pasted the code that you told me to paste at the bottom, and all that it seemed to do was make everything on the page smaller, and it sadly still did not get rid of the gap in the center for some reason. I don't know if I did something wrong but if any help could point me in the right direction, it would be amazingly appreciated.

Thank you for your help so far...

Here is the code I have at the bottom of my theme.scss.liquid:

 

/*============================================================================
  #Print Styles
==============================================================================*/
@media print {
  @page {
    margin: 0.5cm;
  }

  p {
    orphans: 3;
    widows: 3;
  }

  html, body {
    background-color: #fff;
  }

  .giftcard__actions,
  .giftcard__wrap:before,
  .giftcard__wrap:after,
  .giftcard__tooltip {
    display: none;
  }

  .shop-url {
    display: block;
    text-align: center;
  }

  .qr-code {
    display: block;
  }

  .print-link {
    display: none;
  }
}

.product {
    max-width: 768px;
    margin: 0px auto;
}

 

 

And this is what the result is:

Capture.PNG

0 Likes
schmase
Tourist
8 0 1

Update: I have moved the code up and into the brackets. It has solved my sizing problem but now they are not centered and the gap still persists.

I was also able to add margin: 0 auto; to the Img {} part of .product__photo--single and it was able to make it center. But the gap is still there

Capture.PNG

0 Likes
KetanKumar
Shopify Partner
14186 1652 5101

@schmase 

sorry i can't see above code can you please add me on let me now

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes