Jump to content

Mobile Shop Image Border & Radius Not Working

Go to solution Solved by tuanphan,

Recommended Posts

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;
}

 

Link to comment
  • Replies 6
  • Views 443
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution
On 12/23/2022 at 1:10 AM, jojod said:

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 

Add this under your code

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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):

image.thumb.png.663545b1978969f96794bc54b5bdaba6.png

Edited by jojod
More information
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.