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

[user5691]

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

[noahlovell]

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?

[user5691]

.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.

[noahlovell]

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:

---

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

[user5691]

I’ve been using this method from the beginning

, 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

[noahlovell]

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

[noahlovell]

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

[user5691]

hi I cannot share the link cause it is an internal site. It’s still have problem can’t solve but I’ll change using another widget. Thanks for your assistant

[noahlovell]

Looking at it again, I see that the screenshot you shared just shows in the bottom right “TPAWidget elements aren’t supported” - meaning if it’s a Third Party App, it won’t support CSS customization at the moment

[user5691]

I didn’t used any third party app and i check back again it didn’t appear that this time (but this css still can’t work)

[Dan_Suhr]

so you just need corner radius on a lightbox. Just make the lightbox background 0% - add another container - stretch it and give it corner radius. Then you can adjust to suit breakpoints.
no need for CSS code

[user5691]

Yes I know but just wondering why this way can’t work

[Rob]

I just wanted to chime in that I was able to get it it to work on my end but just targeting the custom class within the Editor. I have a very subtle radius on desktop & tablet as shown here:

But then on mobile you can see I have the media query and it works using only the custom class:

My educated guess is that the portions like #SITE_CONTAINER don’t target elements and additionally that #main_MF#main_MF are targeting the same ID (though I’m not an expert on CSS by any means).