Display of sections on different screen sizes (responsiveness)

By using the tool "Sektioners visning på forskellige skærmstørrelser" you can change how a page section is displayed on different screen sizes.

If the tool is not visible in the admin area, you can find it by searching for "responsiv".

How to use the tool

By clicking the panel/button with the different screen icons, a new window opens with settings for 6 different screen sizes.

The 6 screen sizes cover the normal "break points" or screen widths (measured in pixels).

For example, you can make settings for the screen size we call "Very small". It covers all screens that are narrower than 576 pixels in width.

The next screen size we call "Small" and covers screens that are 576 to 767 pixels in width. It is, for example, a normal smartphone or a very small tablet.

If you make a change under a specific screen size, for example by changing the background colour, then that change will only be visible on devices with exactly that screen size.

See the example below where we change the background colour on "medium" screens.



In the same way we can change other things for selected screen sizes. For example, we can add extra padding (space) around a section, and we can also choose to hide a section entirely when using a particular screen size.

Show sections side by side using the width setting

In modern web design it is very important to understand and make use of the possibility of showing sections side by side on large screens.

The advantage is that the same sections can be shown stacked on top of each other on smaller screens. And THAT is one of the most important benefits of responsive design.

This way we can make much better use of screen space. And at the same time we only have to maintain the content in the sections in one place.

We achieve this by changing a section's width from the default 100% to something smaller, for example 50%. Thus the section will only take up half as much as normal. And then there is room for two sections side by side.

When you change a section's width, it is important to ensure that the sections that sit next to each other together end up filling 100% of the screen width.

For example, you can choose to display 2 sections side by side, and both set to fill 50% on large screens. The same sections should be set to fill 100% on smaller screens.

See the example below where two sections stand side by side on larger screens (50% each), and above each other (100% each) on small and medium screens.

The difference between "100%" and "100% full width"

By default we work with "breakpoints" in web design. That means that instead of taking into account all conceivable widths on different screens, we work from 5 breakpoints which are: 576px, 768px, 992px, 1200px and 1400px.

This makes web designs more robust and easier to work with.

That is why you often see empty, white areas to the right and left on websites if you use a large PC screen. It means that your screen is larger than the nearest breakpoint.

When you set a section to fill 100% in width (which is the default) it means that the section takes the same width as the smallest option within the breakpoint range.

For "Medium" screen sizes, which cover all widths between 768px and 992px, this means that the section becomes approximately 768px wide.

A screen that is 900px wide will therefore see the section with a width of 768px, and thus a small amount of empty area will appear to the right and left of the section.

If you instead set the section to fill "100% - full width" then it means that the section will try to use all the available space on the screen. Breakpoints are not considered. If the screen is 900px wide, then the section will also be 900px wide.

It can be an advantage to use "x% - full width" if you have a background image in a section.

Summary:

• Always use the normal setting "x%" if in doubt
• Use "x% - full width" if you want to use the entire screen width
• If you show sections side by side, they must have the same setting. That is, either "x%" or "x% - full width"

If you see empty boxes/areas in your design

If you see empty areas in your design (most often happens on larger screens), it is because your sections do not match up in width.

In the example above, two sections are set to fill 50% and 55% respectively at the same screen size.

Since 105% cannot be displayed in width, each section is shown on its own line. And the rest of the line is therefore empty.

To fix this you must ensure that your sections have the correct width settings.

If one of your sections is set to fill 50% in width, then there must be one or more sections before/after it that fill the remaining 50% of the width.