How do we set the INITIAL size of a custom widget?

visioncraft
visioncraft Member Posts: 162 Learner
edited October 2023 in Ask a Question

I've created a very simple custom widget that is made up essentially of 3 empty divs:

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

The divs won't ever have any content in them: the widget shows an animation that just uses the background images of the 3 divs — so they will always be empty.

The problem is that when the widget is first dragged onto the Site Editor, inside a Flex column, it seems Duda assumes it should be 10px by 10px…:

Screenshot 2023-10-06 at 9.10.12 am.png

I've tried adding CSS, explicitly setting a width+height, hoping that it would use that…:

.widget-64c52d {
  /* hoping it will set initial size of widget: */
  width: 250px;
  height: 250px;
}

…but no: we still get the widget appearing on the Editor as a tiny 10x10 box. 😭

So, Duda Pros, please tell us: what is the trick here? How do we specify the initial size that a custom widget should have when dragged onto the Editor?

Tagged:

Categories