Jump to content

Border Radius not working on mobile device but works on desktop at mobile size.

Recommended Posts

I have tried everything in my ability to get the border radius for the first section their to work on mobile. It works fine on desktop at all sizes but when viewing it on an actual mobile device the image breaks out. 

I have tried:

over-flow: hidden;


Targeting the very root of the section block,  

section.page-section.full-bleed-section.layout-engine-section.background-width--full-bleed.content-width--wide.horizontal-alignment--center.vertical-alignment--middle { overflow: hidden !important; border-radius: 20px;}


Targeting any and all container/div elements using the border radius and overflow hidden.

Can anyone help me out with this? You will need to view the webpage on mobile to see the error. 
 

    section[data-section-id="65b324446b04b27d83236cce"] {
        margin: 35px;
        border-radius: 20px !important;
        border: solid 1px #282828;
      overflow: hidden !important;

    }

  .page-section { overflow: hidden !important;}
  .section-background {overflow: hidden !important;}
  .section-background-content {overflow: hidden !important;}
  .background-image-fx {overflow: hidden !important;}
  .section-background-canvas {overflow: hidden !important;}
    .section-border {overflow: hidden !important;}

    section[data-section-id="65b324446b04b27d83236cce"] .section-background {
        background-color: transparent !important;
        border-radius: 20px !important;
      overflow: clip !important;
    }

    section[data-section-id="65b324446b04b27d83236cce"] .page-section {
        background-color: transparent !important;
        border-radius: 20px !important;
      overflow: clip !important;
    }

    section[data-section-id="65b324446b04b27d83236cce"] .section-border {
        background-color: transparent !important;
        border-radius: 20px !important;
      overflow: clip !important;
    }
Edited by swoopnebula
Link to comment
  • Replies 0
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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.