Fix Common Design Issues

This article aims to cover all the common design related questions for newer users int he Elements ecosystem.

How to ensure page content appears under a "sticky" menu or component

Select your menu component and set the z-index to 31.

How to center an image

To change the alignment of the built-in Components, use the Margin setting under the Spacing Control. Watch the video below to learn more about setting the alignment of an object, including how to center an object.

How to hide the mobile Menu in edit mode

Menu Component > Mobile & Sub Menus > Preview (toggle)

How to change how things look on mobile? (Responsive Design)

The responsive breakpoint system in Elements allows you to change component properties at different user defined breakpoints (i.e. Mobile, Table, Desktop, etc).

On the first “mobile” screen size you do not have any blue dots. As you move up to the next size (SM) you'll see grey dots beside the controls in the Component inspector. If you click on a grey dot (to turn it blue) you can override the setting for that control. Once you add a blue dot you will have that setting for everything above. It’s always left to right.

Watch the video below to see how this works in practice.

How to hide components at different breakpoints

To hide and show components at different breakpoints you'll need to use the responsive design system built-in to Elements.

Layout > Display > Hidden (toggle).