How to fix watermark cutoff on product images in Dawn theme?

Store Design
,
1

I have a watermark on the top right corner of all my product images. On the collection page, the watermark appears to be cut off. Here is a link to the store: https://koralking.com/collections/corals

I want it so the full image is displayed for all the products on the collection pages. Can anyone help with a solution?

Thanks in advance.

2

Hi @shubhampatil

This is Richard from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.cardproduct .card .card__inner .card__media {

height: 230px !important;

}

.cardproduct .card__media .media img.motion-reduce {

height: 100% !important;

}

PageFlyRichard_0-1681830288849.png
PageFlyRichard_0-1681830288849.png1303×369 195 KB

Hope that my solution works for you.

Best regards,

Richard | PageFly

1 Like
3

Amazing! Thank you!

1 Like
4

You are welcome @shubhampatil :blush:

1 Like
5

Is there any way to make the actual images appear larger on the collections page? I think there is too much space in-between product images.

1 Like
6

You can try with this code:

.product-grid-container .grid {
column-gap: 10px !important;
}

1 Like
7

Thanks again! This works perfectly!

1 Like
8

Hello Richard,

I just noticed that on mobile, the photos are cut-off on all sides…is there an way to fix this so the full image is displayed for all products?

9

Please try with this code:
@media screen and (max-width:749px){
.grid__item .cardproduct .card .card__inner .card__media {
height: 170px !important;
}

10

Hi Richard,
I am still facing this problem even with the new code…do you have an alternative solution?