How to set 100% width of my custom element?

Ask the community
,
1

I’ve added my custom element to full width strip. But I’ve found Wix adds inline styles to my custom element:

894×87 16 KB

So, I cannot set “width: 100%” to my custom element on the page, because inline styles have the highest priority in CSS.

I can easily stretch any built-in Wix element to full width (f.e. strip), but I haven’t found any information can I stretch my custom element and how.

Any ideas?

2

  1. You should know that preview mode doesn’t represent the way it’d be displayed on the live site (in preview mode it’s wrapped in an iframe).

  2. You can try (in the custom element class): this.style.width = “100%”;

  3. alternatively you can add width: 100 !important to your css.

3

Thanks for the answer.

  1. Will custom element to be attached without iframe on the live site? Is it possible to test it somehow before I will buy the Premium?

  2. this.style.width and !important will help to set 100% width of the custom element itself. However Wix adds a wrapper container for the custom element which one I cannot control (see the picture). Will this wrapper container to be rendered on the live site with fixed width and can I make my custom element responsive like wix stips?

699×119 21.8 KB

4

@tastyteadevteam

  1. On the live site it’s not wrapped by an iframe unlike in preview mode. To test it, you can try either use another page that you don’t share with external users or create a release candidate without publishing and use the release candidate URL (with the query parameters).

  2. You should try it (I think it’ll be fine on live site). If it doesn’t work , you can try this.parentElement.style.width = “100%”;

  3. You can always use viewport units if it fine for you: this.style.width = “100vw”;

5

@jonatandor35 I’ve tried to see it on a premium website and with " this.parentElement.style.width = “100%”; " it takes 100% width. Thanks :slight_smile:

6

You’re welcome :slight_smile:

7

You’re welcome :slight_smile:

8

I just ran into the exact same problem (and only found your question afterwards). I think the more reliable way. There is a CSS custom property --customElementWidth that you can use. You can style a div inside your element with width: var(--customElementWidth); and it does the right thing and seems less likely to break suddenly that poking the style of the parent element.