Changing boarder radius for mobile only

Hello all,

I have this page set up with very rounded corners which looks great on desktop, but looks weird on mobile. I am trying to make all of the corners of my images on certain pages have a uniform radius when on mobile. Does anyone know how I can accomplish this?

Thank you in advance.

URL: https://oriole-purple-tlln.squarespace.com/about-us

PW: Batteryboys

Hi,

The image looks fine. Can you describe it detail?

Hi tuanphan,

I am trying to make all corners of the image and shape below the image have a radius of 20px when viewing on mobile. Currently on desktop the image is 400px x 400px x 10px x 10px. Is it possible to change the image corner radius based on the viewing device?

Thanks!

On 4/11/2023 at 12:09 AM, Mork_Walfe said:

Hi tuanphan,

I am trying to make all corners of the image and shape below the image have a radius of 20px when viewing on mobile. Currently on desktop the image is 400px x 400px x 10px x 10px. Is it possible to change the image corner radius based on the viewing device?

Thanks!

Hi,

You mean this?

@tuanphan,

Ideally all of the images would look like that when viewing in mobile. Currently, lots of the images that are  curved and end up looking like this. I am trying to make this a rectangle with slightly curved corners when on mobile.

Thank you for the reply.

Any updates on this? I'd also love to change the corner radius of certain elements on mobile. It looks great on desktop, but on mobile I'd love to only round the top of the image and bottom of the white block. Here's what I've tried for the top image that isn't working: 

@media only screen and (max-width:767px) {
#block-b389baa750cd46e5fdc6 {
border-radius: 30px 30px 0px 0px;
}
}
 

Any ideas would be appreciated!

On 11/15/2023 at 11:04 PM, rotanzdesign said:

Any updates on this? I'd also love to change the corner radius of certain elements on mobile. It looks great on desktop, but on mobile I'd love to only round the top of the image and bottom of the white block. Here's what I've tried for the top image that isn't working: 

@media only screen and (max-width:767px) {
#block-b389baa750cd46e5fdc6 {
border-radius: 30px 30px 0px 0px;
}
}
 

Any ideas would be appreciated!

Can you share link to this page?

@tuanphan yes! it's: https://www.sparrow-health.com/new-home (pw: editmode)

23 minutes ago, rotanzdesign said:

@tuanphan yes! it's: https://www.sparrow-health.com/new-home (pw: editmode)

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

@media only screen and (max-width: 767px) {
    .fe-block-b389baa750cd46e5fdc6, .fe-block-yui_3_17_2_1_1698415691878_50116, .fe-block-1c0cd067360a978a4d06, .fe-block-2472109614b7d343815a {
        .fluid-image-container {
            border-radius: 20px 20px 0 0 !important;
        }
    }
    .fe-block-yui_3_17_2_1_1698415691878_51271, .fe-block-1d2d4ff91d3806c09714, .fe-block-0d32bb49939ab03eb7c9, .fe-block-e98c75dd39a2626d669c {
        .sqs-shape {
            border-radius: 0 0 20px 20px !important;
        }
    }
}