Sizing - How to change the size of elements on your website?

1. Click the widget you want to resize and select Widget Styles.
2. Go to the Position Tab.
3. Select the content on the box model - it’s the center section of the graph. It will open detailed settings that will let you adjust the width and height of the element.
4. Specify the units and edit the value of width and height to change the size of the element.

• Minimum value (min) - specifies the minimum width an element can be sized to. If the content of the element requires more space, the element will expand to fit it, but it will not shrink below the specified minimum width.
• Maximum value (max) - sets a limit on the width an element can grow up to. If the content within the element needs less space than the maximum limit, the element will automatically adjust its width to fit the content. However, it will not exceed the specified maximum width under any circumstances.

Relative sizing refers to sizing an element in relation to another element.

Using relative units for sizing is often useful for creating responsive designs that can adapt to different screen sizes and device types.

For example, setting the width of an element to 50% means that it will be half the width of its parent element. Other relative units include em, which is based on the font size of the element, and rem, which is based on the font size of the root element.

Let’s you control the exact size of an element. The element will always have that exact width or height, regardless of the size of its parent element or the content inside it.

Fixed sizing can be more precise, but it can also make a layout less flexible and may not work well across different screen sizes and devices.

For example, setting the width of an element to 100px means that it will always be 100 pixels wide, regardless of the size of its parent container or the font size used on the page.

A common mistake is to use a widget's borders (green outline, visible when you click on a widget) to resize it.

Although they allow you to change the dimensions of the widget, using them results in giving the item constantly, unchanging dimensions. Sometimes this causes complications, so the operation of borders should be well understood.

If a widget has the same dimensions (width and height), it means that regardless of the circumstances (e.g. changing the screen resolution to a smaller one on a mobile device), the dimensions of such an element will remain the same.

If a widget has the same dimensions (width and height), it means that regardless of the circumstances (e.g. changing the screen resolution to a smaller one on a mobile device), the dimensions of such an element will remain the same.

This feature is useful, but improper use of it may result in, among others: a lack of responsiveness, because elements of the page with invariable dimensions displayed on a mobile device will not adapt to the smaller screen size.

When you add an Area widget to the page, then place other widgets in it and change the dimensions of the Area with a green border, the effect may seem to be what you expected.

However, the problem will arise when:

1. We will add more widgets to the Area,
2. We will increase the size of the widgets already inside the Area.

Then, the Area will not adapt to them with its size (because it will be limited by the previously set - with green borders - height).