How to handle your Rows/Sections in Osmosis

It is very important for the user to know the options Osmosis offers in Rows in order to place correctly the elements given.
Options are plenty; let’s have a look:

General

Section ID

Give a name for the section (row). This will be useful if you need an anchor menu (see Anchor Menus in this documentation)

Section Title

Give a title for the section (row). This will be useful if you need a title for the side dot navigation (see Menus in this documentation).

Font Color

Choose the color for your fonts so texts will be readable.

Heading Color

Set the color for your headings. Select among default, light, dark or one of the primary colors.

Extra Class

In case that you like to use one of your classes.

Section Options

Section Type

Select among 3 different row types.

  1. Fullwidth Background – the background will be stretched
  2. InContainer – the background for this row will be in the container of Osmosis (1170px)
  3. Fullwidth Element – the content of this row will be stretched and not just the background
Flex Column Height

If selected columns will have equal heights. Recommended for multiple columns with different background colors.

Middle Column Content

If selected column content will be centered vertically.

Section Window Height

Select if you like your section has the window height.

Background Type

Select the background for your section (row). You can use none, color, image or hosted video. Here you can set the parallax effect in case you use a background image.

Top Padding

You can easily increase the padding top of your section (row).

Bottom Padding

You can easily increase the padding bottom of your section (row).

Bottom Margin

Set the margin-bottom of your section (row). For example you must set 0px if you like to collapse it with the next section (row).

Header Section

Check this box if the row you create is the first section just below header. This option ensures that there will be no gap between your header and your first section.

Check this box for your last section, the section just above footer. This option ensures that there will be no gap between your footer and your last section.

Responsiveness

Here you can hide any row/section you prefer on devices. You can hide rows on tablet, both landscape and portrait orientation, and on mobiles.

Desktop Visibility

If selected, the row will be hidden on desktops/laptops.

Tablet Landscape Visibility

If selected, the row will be hidden on tablet devices with landscape orientation.

Tablet Portrait Visibility

If selected, the row will be hidden on tablet devices with portrait orientation.

Mobile Visibility

If selected, the row will be hidden on mobile devices.

These are major settings to specify your spaces, especially when you use multiple colored rows or rows with image background. For example: You have two rows with the full background that you want to stick each other. Just set 0px the margin-bottom of your first row.