How do I apply different border-radius on mobile using CSS in Wix Studio?

Ask the community
, ,
1

Question:
My CSS works good on Desktop but cannot have any adjustment at mobile

Product:
I used Wix Studio to build my website

What are you trying to achieve:
I’m Trying to have different border-radius px on different device, I use media query to make coding have different corner size on different device but it can only works at desktop

What have you already tried:
I’ve already tried different code, different situation but media query cannot works everywhere

1 Like
2

Are you able to share the CSS you used?

Also curious - is this something that could be done through the editor UI? Set the corner radius on desktop, then on mobile/tablet change it to a different unit?

3 
.change-story-ltbox {
  border-radius: 32px;
}

@media screen and (max-width: 480px) {
  #SITE_CONTAINER #main_MF#main_MF .css-editing-scope .wixui-change-story-ltbox[style] {
    border-radius: 24px 24px 0 0 !important;
  }
}

here’s my CSS and no, this component didn’t have corner radius setting in editor UI but I could done by adding another unnecessary component to achieve adjust corner in editor UI but in this way will cause layout broken easily.

4

Ahhh okay - from what I’m piecing together, you have a lightbox, and want to customize the border radius of the lightbox, right?

Firstly, Studio uses a mixture of symantic classes, and custom classes to target components (you’ll find the synamtic classes for an element in the “CSS Classes” panel. This shows the area that can be targetted)

For example, a button has:

The image shows a user interface for selecting or creating a button class in an interface, with options for CSS reference, custom classes, and global button classes.
The image shows a user interface for selecting or creating a button class in an interface, with options for CSS reference, custom classes, and global button classes.333×331 11.7 KB

In your case, you’d simply use:

.change-story-ltbox {
  border-radius: 32px;
}

@media screen and (max-width: 480px) {
  .change-story-ltbox {
    border-radius: 24px 24px 0 0;
  }
}

And add change-story-ltbox to the lightbox custom class

Screenshot 2025-06-05 at 11.29.05
Screenshot 2025-06-05 at 11.29.05333×255 11.4 KB

5

I’ve been using this method from the beginning

Screenshot 2025-06-06 at 9.24.27 AM
Screenshot 2025-06-06 at 9.24.27 AM1401×416 81.9 KB

, but it hasn’t worked at all. Whether I publish my website or preview it in the editor, it still doesn’t take effect. When I inspect the page, I can see that my media query isn’t being detected at all.

So I switched to using WIX Studio’s original CSS classes and IDs, hoping their specificity is higher than the custom CSS I wrote, so they can override the default styles.

But it seems not working too.

Is there any other ways can solve this issue or what’s reason will cause this issue?

and thanks for your kindly reply

6

Are you able to share a link to the site/screenshot of the element you’re trying to apply the CSS too?

I tried on my end, and it’s working - so a little confused as to what’s happening :slight_smile:

7

Looping back here - did you get any further with this?