Mobile Shop Image Border & Radius Not Working

Hi there! hopefully @tuanphan sees this because this person is a genius.

Okay so my new Shop page only has three products, and to match the rest of my website, I customized the images to have 35px border-radius and 2px border - but for some reason this is not translating to the mobile site. I've tried adding the mobile code to the custom css but I'm not quite getting it. Below is the code I currently have going:

////Shop Customizations////
.products.collection-content-wrapper .grid-item .grid-image{
 border: 2px solid #000;
 border-radius: 35px;
 box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.1) 
}
.products.collection-content-wrapper .grid-item:hover .grid-image{ 
border-color: #ca5741! important;
 box-shadow: none!important; }

.products.collection-content-wrapper .grid-main-meta .grid-title, h1.ProductItem-details-title {
    font-family: 'Otomanopee' !important;
}

/* 2 Column Product Grid */
@media only screen and (max-width:640px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 48%;
  
}
}

.products .grid-image {
width: 85% !important;
margin: 0 auto;
}

Hi,

What is site url?

10 hours ago, tuanphan said:

Hi,

What is site url?

Oh I'm sorry - the form to fill out to post this in the forum asked for the URL and I thought it would share it on my actual post. The URL is:

https://www.thecreativeinka.com/shop 

On 12/23/2022 at 5:22 PM, tuanphan said:

Add this under your code

.grid-image-wrapper.has-hover-img {
    border-radius: 35px;
}

 

Yay! While this code fixed my border on mobile issue, now when you tap+scroll (so not tapping to open product page, but more like a hover tap & scroll), the square edges of the hover image appear. How can I get rid of that? Or would it be easier to just turn off the hover on mobile (if so, how would I do that?)? 

Edit: I'd like to add that this happens on iPhone iOS (I have a 14 Pro Max) - it doesn't seem to happen on the mobile via inside of Squarespace.

This is what it looks like when tap+scroll (it flickers to this):

iOS always have problem with border-radius

Try adding this code under

.products.collection-content-wrapper .grid-item .grid-image {
	overflow: hidden !important;
}

You are the best. That fixed it. Thank you so much! I'll mark your original help as the solution although you solved two of my issues.