How to change the size of elements on your website?
BOWWE tutorials
Welcome to our collection of online lessons. We’ve created these to help you learn the best practices and get the most out of BOWWE. Come back here whenever you want!

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

For the easiest way to edit the appearance, settings and behavior of widgets in the BOWWE page builder, use Widget Settings and Widget Styles. It is also the most effective way to edit elements on the page - using it, you will avoid errors and ensure the smooth operation of your website.

 

In this tutorial, you'll learn how to get it right!

How to properly change a size of a widget? Step-by-step instruction

  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 and maximum size value

When editing the size of elements on your page you’ll notice additional settings that let you specify the minimum and maximum value of the height and width property. These properties are useful for ensuring that an element does not become too small or too large, which can negatively affect the layout and user experience of a webpage.
  • 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.

Types of sizing - relative sizing vs Fixed sizing

In creating a website there are two main types of sizing. Both relative and fixed sizing have their strengths and weaknesses, and the choice of which one to use will depend on the specific requirements of the design.

Relative sizing

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.

Fixed sizing

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.

Widget resizing - the most common mistake you must avoid

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.

Incorrect resizing of the widget - example:

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

Congratulations!

Now you know how to resize widgets on your website!