Targeting CSS

Adding background colors to containers, columns and nested columns is simple in Avada, but did you know there are a number of other blocks holding these components — divs that surround these building blocks?

CSS vs. Settings

By default, the settings adjust the column you are working in and the CSS field, without targeting, applies to the parent container. A visual representation of the containers not managed by settings below.

Basics of targeting the fusion builder wrappers:

• fusion-builder-row: is the full width or site width wrapper of your columns. This is in the basic container and the nest column container. If you only use this, it will target all instances, including those within a nested column.
• .fusion-layout-column : wraps each non-nested column
• .fusion-builder-row-inner : this will target the wrapper within a nested column container
• .fusion_builder_column_inner : this will target the column wrapper within a nested column

To prevent unexpected results, assign a class to the parent container — .target used here.