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

schmase
Tourist
8 0 1

Hey, I am newish to Shopify. I am fairly good with HTML and CSS but I cannot seem to figure this out.

So on my product page, I have two images side by side right smack dab in the middle of the screen, but only when in fullscreen mode. In any other mode the pictures are slightly off-centered or when you switch to mobile the pictures do not stay next to each other and they appear half off of the screen.

So basically what I would love is for both of the images, the front and back of a piece of clothing, stuck right by each other and always centered on the screen right above the purchase button and description. I am editing the Boundless theme if that helps at all.

Fullscreen                                                                                    Half a screen                                                                      About phone size

FullscreenFullscreenHalf a screenHalf a screenAbout phone sizeAbout phone size

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

And here is the code I have altered for this result in themes.scss.liquid

/*================ Product images ================*/
.product__photo {
  position: relative;
  max-width: 600px;
  margin: 0 auto 0 auto;
  text-align: center;
  display: inline-block;
  
}

.product__photo--single {
  position: relative;

  img {
    position: absolute;
    top: 0;
	left: 50%;
	right: 50%;
    min-width: 100%;
    min-height: 100%;
    z-index: 1;
    margin: 0 10px 0 10px;
    float: none;
  }
0 Likes
KetanKumar
Shopify Partner
14394 1672 5179

@schmase 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

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

Hopefully, this will do!

 

https://4c8kn7xvpkwe1z88-47328854167.shopifypreview.com

 

Edit: I did not realize that my text and pictures formatted that badly, I'm sorry if it is a headache to understand!

0 Likes
KetanKumar
Shopify Partner
14394 1672 5179

@schmase 

Thanks for it 

it can be done custom change

 

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
schmase
Tourist
8 0 1

@KetanKumar 

 

How would I go about that? I don’t mind messing around with some code or files. 

0 Likes
KetanKumar
Shopify Partner
14394 1672 5179

@schmase 

can you please revert your custom change first and see theme default view after change you can try it 

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
schmase
Tourist
8 0 1

@KetanKumar 

 

Okay, I committed the changes so you should be able to see. We're getting closer! 

I know I am being picky but, is it possible to make the pictures smaller and centered? I was able to figure out how to make it smaller just by changing the width percentage, but I cannot seem to find how to center them side by side.

 

Thank you for all of your help so far by the way!

 

Edit: I know I can kind of center them by using the left and right percentages but I don't like the space in the middle.

0 Likes
KetanKumar
Shopify Partner
14394 1672 5179

@schmase 

is this fine for you?

KetanKumar_0-1611115601629.png

 

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 

That's Perfect! You are truly amazing!

 

0 Likes
schmase
Tourist
8 0 1

@KetanKumar 

Is it possible for me to get the code of that?

Thanks a million!