Visibility
Visibility allows you to hide elements placed directly within a box. The visibility panel is a visual representation of the box’s layout.
To hide an element, select the box that element is located within. Then in the visibililty panel, click on its correlating rectangle within the panel. A hidden element is shown as a collapsed rectangle with a gray border.
![Visibility property](https://mintlify.s3-us-west-1.amazonaws.com/makeswift/images/property-panels/visibility.gif)
Examples
Visibility is most commonly used when designing for different devices. One example is for sections where the placement of an image on desktop is not ideal for mobile. You can hide the image on mobile and replace it with a different image that is optimized for that device.
Pro tips
You can utilize visibility to deliver completely different content experiences between devices. Simply add all of the content you would want to show and utilize the visibility property per device to customize each experience.
Developer notes
Hiding elements using the visibility control still loads it on a page, keep this in mind when taking into account your page performance.
Was this page helpful?