Image and gallery center alignment for large devices

BRYON SHANNON

Hello, my product page is here; https://getunlockd.com/product/refurbished-apple-iphone-8

As you can see the product image looks Left align. Is it possible to Center align the entire section, with the featured image and gallery thumbnails moving together towards middle of the screen? Or, can I add left padding to the section for large device screens to fix this?

It looks great on mobile. These sections are already Center aligned on mobile screens.

Shamser Suzon

Hello BRYON SHANNON,

can I add left padding to the section for large device screens to fix this?

Yeah, you can try this.

Thanks

BRYON SHANNON

Hi can you explain where I could add this? Is it in the CSS section? What would the best code be to paste?

Shamser Suzon

Hello BRYON SHANNON,

Please, push the following CSS codes to your custom CSS section:

.woo-variation-product-gallery {
margin-left: 100px;
}

Let me know how it goes.

Thanks

BRYON SHANNON

Thank you Samser,

 

I added your code and it worked. I modified it so that it only affects the desktop, because it was already looking good on mobile. Code below. I cannot understand why, but I am unable to control margin-top in this same way. Do you know how I would add code to modify the top margin the same way I added code to modify the left margin?

 

@media (min-width: 800px) {
.woo-variation-product-gallery {
margin-left: 100px;
}}

BRYON SHANNON

Also, I believe my theme settings are over-riding any edits to the gallery width inputs below.

 

As you can see from this 17 second video, the gallery loads via normal page load, then always resizes to the user after initial load to stretch and pixelate. https://youtu.be/wOCVBRCLIJs

 

Do you know how I can control the final dimensions? Thank you.

Shamser Suzon

Hello BRYON SHANNON,

Do you know how I would add code to modify the top margin the same way I added code to modify the left margin?

Yes, in the same way.

Do you know how I can control the final dimensions? Thank you.

Currently, there is no workaround on this. It happens sometimes maybe because of page load time.

Thanks