This article explains how you can adjust the dimensions, margins and white spaces of an element on your website. To adjust the dimensions or white spaces, you have to be logged into the front-end editor.
To adjust the dimensions or white spaces, first click on the element that you want to adjust. In the right menu click on the tab for dimensions and white spaces. You can recognize them by the four arrows in a square (see figure).
In the tab you will see the width and height section. Underneath there are two fields: the width and height. In most cases these are set to auto. In that case, the element adapts to the content and the available space.
If you want to set the height or width, use these fields. The element adjusts immediately while you enter the values. This makes it easy to play with the sizes until it looks just right.
Next to the numbers you can select the unit type. The default is px, but you can choose any other if it suits your pupose. More about these units in the article about unit types in web design.
In the tab you see under the width and height a frame with two frames in it. In the inner frame you can set the white spaces (paddings). The four settings for the white spaces are shown in red in the accompanying figure. You can set the white spaces in the top, bottom, left and right of the element separately.
Enter a value, and you will see the whitespace appear immediately in the element that you are editing. If you do not set a value, the value automatically switches to "auto". To ensure that no white space is shown, you must manually set it to 0 (zero).
By default, the white spaces are defined in pixels. To adjust this, click on the "px" and a fold-out appears in which you can choose another unit.
In addition to the white spaces within your element, you can also adjust the margins outside your element. The 4 fields that control these margins are outlined red in the accompanying figure.
Enter a value, and you will see the spaces appear immediately next to the element that you are editing. To ensure these margins apear, the element will probably shift or become smaller. If you do not set a value, the value automatically switches to "auto". To ensure that no margins are shown, you have to set them manually to 0 (zero).
By default, the margins are defined in pixels. To adjust this, click on the "px" and a fold-out appears in which you can choose another unit.
Within Webanizr you have three options when it comes to how your element is placed. These are displayed as 3 icons. The options are: