Jump to content

Custom Image shape shows great in Chrome but not in Safari

Recommended Posts

Site URL: https://www.wholestorystudio.com

Hello There!  For my client's website I created custom shapes for it before Squarespace made that ability possible lol

Anyhow, I used CSS to create the shape and border around it. However, for some reason on the home page on Safari it doesn't keep its shape or the border but in Chrome browser it does. See images below:

Safari Browser view

image.thumb.png.5d750db11a06192ba666070d6304e12b.png

 

Chrome Browser view

image.thumb.png.33a1dab10b23ff17f6aad7fc81faeba5.png

 

Here is the code I used:

 /*About Julie Image on home page*/

#block-e2e3870b5d870d4525cd .sqs-image-shape-container-element {
border-radius: 400px 0px 0 0;  
border: 2px solid #000000;
 width: 98% !important;
 height: auto !important;
 overflow: hidden !important;
  }

 

I've tried the following code (this has worked for all the other pictures like this shape throughout the website not this one on the home page)

#block-e2e3870b5d870d4525cd img {

border-radius: 500px 0px 0 0;

border: solid;

border-width: medium;

width: 99% !important;

height: auto !important;

top: 0 !important;

left: 0 !important;

  }

 

Any insight would be helpful and appreciated. Thanks y'all!

Link to comment

As far as I know border-radius doesn't work on Safari.

You try some answer here. I think your case is similar

https://discourse.webflow.com/t/overflow-hidden-round-corners-not-working-on-safari/67805/5

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

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.