Logo Magzmaker

Size and position

How can you best set the size of a content block, for example an image, and how do you determine the position within the section? You can do this in different ways. See for yourself what you prefer:

  • Use a column layout of a section to determine size and position: define the columns so that the image is in the right place
  • Or place the image in a section of one column (the entire width of the page) and determine size and position by setting the left and right margins.
Meetlint

    Column Layout

    A Centered Layout with a Section Containing 3 Columns
    • Choose a column layout from the preset options via "Import Section from Library" (or use "+ Add Section" to set up the layout manually. More information on adding a section). For example, select the 3-column layout: 25%-50%-25%.
    • Add the content blocks to the second column, which is 50% of the width. This will automatically make the content 50% of the screen width and position it in the center. There’s no need to set the width or specify left or right margins; you may only need to add a little margin at the top and bottom (e.g., 20px) to create some space around the content.

    Since the column layouts follow a fixed grid, the position might not be exactly as desired. In that case, create a single-column section. Within this, you can precisely adjust the position by setting the left and right margins using percentage or pixel values.

    Positie content gecentreerd

    Position and size by width in percentage

    Left and Right Margin

    A Centered Layout by Setting Margins in a Single-Column Section (100%)

    Add a single-column section via "ImportSection from Library" or by using "+ Add Section."

    Content blocks placed within the column of this section will automatically be centered (the left and right margin fields are set to "auto"). If you want the content block to be positioned more to the left or right, enter unequal values in the left and right margin fields. It's best to use percentages for scalability.

    You can specify the size of the content block in the width field, but you can also leave this field blank and let the size be determined by defining the space on the left and right: the left margin and right margin.

    When you make the space (margin) on both sides equal, the content block will be centered. If you want to position a content block more to the left, make the right margin larger than the left margin. The total screen width is always 100%; you can use this to create a division between the left margin, content block, and right margin.

    • If there isn’t a section on the page yet, first add a single-column section. This can be done via "Import Section from Library" (or by using "+ Add Section" to manually fill in the settings).
    • Add a content block (+ Add block) and click on the "Settings" tab to fill in the margins.
    • Enter 25% in both the margin left and margin right fields.
    • Optionally, add margin top or margin bottom to create some space between this content block and the one above or below it.
    • Leave the width field empty.
    Positie content gecentreerd

    Position and size with margin left and right

    Examples:

    Positie en afmeting gecentreerd

    3 Options for a Centered Layout:

    1. A section with 3 columns: 25%-50%-25% (grid 3-6-3).
    2. With space on the left and right of the content block: left margin: 25% - right margin: 25%.
    3. You can achieve the same result by simply entering 50% in the width field. The left and right margin fields are set to "auto" by default, which centers the content block. This works well when the content needs to be centered.
    Position and size with column layout

    Section with 3 columns

    Position and size with margin left and right

    Only left and right margin, no width

    Position and size by width in percentage

    Width only, margin default (auto)

    Positie en afmeting links

    3 Options for a Layout with Content on the Left Side

    1. A section with 3 columns: 9% 33% 58% (grid 1-4-7).
    2. With space on the left and right of the content block using left margin: 10% - right margin: 60%.
      This configuration creates minimal space on the left and a lot on the right, positioning the content block far to the left. The remaining space between the left and right margins is 30%, so the content block will occupy 30% of the width without needing to fill in the width field.

    3. Alternatively, you can enter 30% in the width field and leave the left and right margins set to "auto," which will center the content block. If you want the content block more to the left, set the left margin to 10% and leave the right margin on auto.

    Position and size - left side with column layout

    Section with 3 columns

    Position and size - content left side with margin left and right

    Only left and right margin, no width

    Position and size - content left with left margin and width

    Width and left margin, right margin auto

    One way is not better than the other, just choose what you like best.

    Pixels or Percentages?

    You can set the size of a content block using the left and right margin fields or the width field. In almost all cases, it's better to leave the height field blank, as the height will automatically scale with the width you specify.

    You can enter values in the margin and width fields in either percentages or pixels. What's the difference, and which is better?

    • Percentages have the advantage of scaling when you reduce the screen size; a content block that is 50% wide will always take up half the screen, regardless of the screen’s resolution (the number of pixels on your screen).
    • Pixels are a fixed size; an image that is 600px wide might appear to take up half the screen on your display, but someone with a larger screen and higher resolution will see the image much smaller. Conversely, the image might appear too large on a lower-resolution screen.

    Percentages are generally more flexible and are particularly useful for defining the width of the screen (for width, left margin, and right margin). For the space above or below a content block (top margin and bottom margin), you might want a more fixed size, so using pixels could be better.

    Our preference is usually to use percentages for width and pixels for height. However, in some cases, it might be important for a content block to maintain a fixed width across different screen sizes, or for the space above or below a content block to be scalable.

    Note: The default templates in Magzmaker are optimized for use on different screens. You can review their settings if you want to make your own choices.

    Responsive Content Blocks

    On mobile phones and screens narrower than 768 pixels, a content block is automatically set to 100% width with a small margin of 15px on the left and right, so it appears screen-wide with a small gap from the edge of the mobile screen.

    This is the default setting, but there may be situations where you want to keep your own left and right margin settings under the "Settings" tab. You can adjust this:

    • Open the content block.  > Edit.
    • Click on the "Advanced" tab.
    • Uncheck the box that applies the custom 15px left and right margin.

    Sections
    The columns of a section are stacked vertically when the screen width reaches the 768-pixel breakpoint. Content blocks that were side by side are displayed vertically on a mobile screen.
    In some cases, it might look better if the columns stack earlier, for example, at a screen width of 1024 pixels, or only when the screen width is smaller than 600 pixels. You can change this breakpoint in the section settings. Adjust the default 768-pixel breakpoint by clicking on the section name on the left. Choose one of the other options from the "Breakpoint" dropdown:

    • 600 pixels
    • 768 pixels (default)
    • 820 pixels
    • 1024 pixels
    • 1280 pixels