How to add line breaks and why you need them

Best Practices > Step 2 - Template > How to create a "Mobile-friendly" website  > How to create a responsive website >

How to add line breaks and why you need them

Previous pageReturn to chapter overviewNext page

You can use the commands in the Responsive settings window to make each page in the website adapt to the various devices it may be displayed on, indicating how the page must change at each active breakpoint.

If you are working with the Professional edition, when you have defined the order in which the objects are to be displayed and decided which ones to hide in certain viewports, in this window you can decide whether and where to add line breaks for each breakpoint.

A line break moves an object or object block onto a new line when the page is displayed at resolutions that are lower than the selected one.

Click on the Line break button to start adding necessary line breaks. You will see a broken gray line in all the places in the page layout where you can add a line break. Click on one of these lines to add your line break: the broken line will turn red. Click a second time on the broken line (now red) to remove the line break. Click on the Line break button a second time to confirm your settings and end this procedure.

Image 1. Adding line breaks to the page layout

Image 1. Adding line breaks to the page layout

The example below helps clarify the line break mechanism: line breaks have been set before object 3 and after object 7 at the desktop breakpoint:

Image 2. Layout for the desktop breakpoint

Image 2. Layout for the desktop breakpoint

As you can see, the line break symbol reflects the display order. Have a look at the line break symbol before object 7: object 7 will be placed above the block created by objects 8, 9 and 10 because the display order for these objects is from right to left.

Given the display order, the line breaks that have been added and the fact that object 2 has been hidden, the resulting page layout at the next breakpoint after the desktop will be the following:

Image 3. Layout for the breakpoint following the desktop breakpoint

Image 3. Layout for the breakpoint following the desktop breakpoint

You can see that object 2, which was hidden, is no longer visible but the display order of the other objects doesn't change. The line break forces objects 3 and 4 onto row 2, leaving object 1 to occupy the whole width of row 1. If the line break hadn't been added. objects 1, 3 and 4 would all have remained side by side on row 1, each occupying a third of it.

The second line break separates the block of objects 8, 9 and 10 and places them on new rows, under object 7.

Note that, when an object covers more than one column, its proportion in width is maintained in the next breakpoint. In image 1, for example, object 5 occupies 3 of the 4 available columns at the desktop breakpoint: this is equivalent to 75% of the row. This proportion is maintained at the next breakpoint (image 3), even though the other objects that are aligned along the width don't have the same layout as before.

 


Best practices:

-

How to create a "Mobile-friendly" website

-

How to create a responsive website

-

How the object display order works