Why can I see all of my product images stacked on top of each other on my product page?

I've been adding product photos to my shop and each photo added appears behind the previous image in the product gallery. I'm using png since that are already added to my site for other uses, do I have to upload separate images with a white background for use in the shop? I'd really rather not have to create, save, and add two versions of each product photo for my entire inventory.

4 hours ago, yooper906 said:

I've been adding product photos to my shop and each photo added appears behind the previous image in the product gallery. I'm using png since that are already added to my site for other uses, do I have to upload separate images with a white background for use in the shop? I'd really rather not have to create, save, and add two versions of each product photo for my entire inventory.

we can use some css tweaks to add a white background to each slide, could you share the site url?

I just ended up doing jpeg versions of everything.

Though I am now having an issue where I can't change the font for the product prices on the product pages. It doesn't respond to any changes in the theme and no CSS I've tried has worked either. I added custom css to change the font for product page headings, so I assume it somehow is messing with the price below it, but I can't figure out how. 

The site isn't public yet.

https://www.yooperlife.net/
pw: Yooperl1f3

On 3/7/2024 at 7:13 AM, yooper906 said:

The site isn't public yet.

https://www.yooperlife.net/
pw: Yooperl1f3

If you can't change product price size on Site Styles, use this code to Website > Website Tools > Custom CSS

/* product price */
.product-price {
    font-size: 30px !important;
}

@tuanphan that worked, but it changed the price size on all the image blocks on the page as well. Is there something I can add so it only effects the pricing on the item-view/product page? Thanks!

9 hours ago, yooper906 said:

@tuanphan that worked, but it changed the price size on all the image blocks on the page as well. Is there something I can add so it only effects the pricing on the item-view/product page? Thanks!

Use this new code

/* product price */
body.view-item .product-price {
    font-size: 30px !important;
}