Editing images and text on product page

Hi coders

My product page is split 50/50 with images on the left and text on the right:

https://www.object750.com/shop/p/smiley-pendant-custom-initials

Web Text:
- I would like the text on the right to be fixed on the page
- Text to be centered vertically and horizontally

Web Images: 
- Decrease the gap between the scrolling images to 1px
- Remove the big gap between the last image and the footer (so the last image sits right up to the footer) 

Mobile:
- See image attached

Images attached for reference. 

Thank you!

With web text, try this code to Website > Website Tools > Custom CSS
 

@media screen and (min-width:768px) {
section.product-details.ProductItem-details {
    padding-top: 0px !important;
    height: 100vh !important;
    justify-content: center;
}
}

On 3/19/2024 at 9:18 AM, tuanphan said:

With web text, try this code to Website > Website Tools > Custom CSS
 

@media screen and (min-width:768px) {
section.product-details.ProductItem-details {
    padding-top: 0px !important;
    height: 100vh !important;
    justify-content: center;
}
}

 

Thank you again Tuan

To change add to cart, quantity position, use this CSS code

@media screen and (max-width:767px) {
div.ProductItem-details-excerpt {
    order: 1 !important;
}
}

On 3/26/2024 at 7:55 AM, tuanphan said:

To change add to cart, quantity position, use this CSS code

@media screen and (max-width:767px) {
div.ProductItem-details-excerpt {
    order: 1 !important;
}
}

Thanks Tuan!

There's an annoying white margin to the right of the page in mobile view - how do I get rid of that?

On 3/28/2024 at 7:12 AM, Rawan said:

Thanks Tuan!

There's an annoying white margin to the right of the page in mobile view - how do I get rid of that?

You can use this CSS code

body, html {
    overflow-x: hidden;
}