Woodmart Slider border radius not showing in Mobile Chrome but works on Desktop

Hi there,

I have created a Woodmart slider and added my own custom CSS to give the slider a 30px border radius. I inserted the following CSS code:

.flickity-viewport {
border-radius: 30px !important;
-webkit-border-radius: 30px !important;
-moz-border-radius: 30px !important;
}

The following CSS code works on the Desktop Chrome browser even when testing with a mobile Viewport. However, when using my mobile phone, the border-radius does not render at all. I have made sure that all cache has been cleared completely including the server cache. I would appreciate it if you guys can kindly help me with this issue.

I have also attached 2 images, one image showing how the slider looks on my mobile phone (border radius not showing) and another image showing how the slider looks on my desktop(border radius working).

Thank you so much!

Attachments:

You must be logged in to view attached files.

Hello,

Thank you very much for choosing our theme and for contacting us.

I have checked the home page and I see the border on both: desktop and mobile: https://gyazo.com/4f638874953621b428475619979e96c6

What device do you use to check?

Best Regards

Hello,

Thanks for the quick response. May I know if you are checking the page on an actual mobile phone?

Based on the video you shared, it looks like you are using Desktop browser adjusted to mobile width. I have change the viewport on Desktop chrome to mobile and it shows also. This problem only shows on an actual Mobile browser.

Could you try testing on your actual mobile phone ? I am using actual iphone 11 device to tes (mobile Chrome browser). I have also tested with Safari and the results are same.

Thank you.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

Please try to replace the code with this one:

body .wd-slider {
border-radius: 30px !important;
}

Please add this code to the Theme Settings > Custom CSS > Global

Best Regards

Hello,

I have replaced the code with the one you have provided but the results are exactly the same. The border-radius works on the Desktop browser (Mobile viewport also works). However, the border-radius still doesn’t show on my actual mobile browser.

I will leave the updated code as it is so you may take a look at it. You may check the website on an actual mobile device browser to see the issue. Thanks so much for your assistance!

Hello there,

Are there any updates regarding this issue ? I am still unable to solve this weird issue.

Thanks.

Hello,

Our developers have checked and did not find the reasons the styles are not applied, please insert the site admin access into the Private content below the message area. We will take a closer look at the case.

Best Regards

Hi there,

I have made sure that the styles are applied under the Theme Settings > Custom CSS -> Global Custom CSS as instructed. I think there is more to this issue since it is affecting only the actual mobile browser but works on Desktop (Even mobile view).

Also, just for your developer’s reference, I have tested by adding a CSS code of:
.wd-slide-bg {
border-radius: 30px !important;
}
This CSS code works on the actual mobile browser. However, the border radius shows but it only affects each individual slide and not the entire viewport. This means that every time I slide on mobile, it will show the curved edges of the next slide which is not what I want. I have attached an image showing this.

I want the border radius to only affect the viewport of the slider exactly like the CSS code provided (body .wd-slider) but also for it to work for the actual mobile browser.

I have added my site admin access for you guys to take a closer look at this issue. Thank you very much.

Attachments:

You must be logged in to view attached files.

Hello,

Please replace all the code related to the slider with this one:

.wd-slider {
	border-radius: 30px;
	clip-path: inset(0 round 30px);
} 

If you have any questions please feel free to contact us.

Best Regards

Hi there,

I have tested the CSS code and it works on my mobile browser now! Thanks so much!

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts