> ## Documentation Index
> Fetch the complete documentation index at: https://help.emaillove.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Show/Hide Content on Desktop & Mobile

> Control which content appears on different devices

The Email Love Figma Plugin allows you to control which content appears on desktop versus mobile devices. This feature gives you precise control over the mobile and desktop experience without duplicating entire email designs.

<iframe src="https://www.loom.com/embed/b992bde69cbd468f97e0b6f716d881c3" width="100%" height="400" frameBorder="0" allowFullScreen />

## Where to Find It

1. Select any email component in your Figma design
2. Open the Email Love Plugin
3. Navigate to the **Mobile Styles** section
4. Look for the buttons at the top: **Hide on Desktop** and **Hide on Mobile**

## Which Components Support Show/Hide?

You can apply these visibility controls to:

* **Wrappers** (container sections)
* **Columns** (layout blocks)
* **Text frames**
* **Button frames**
* **Image frames**

## Common Use Cases

### Device-Optimized Images

Display different images based on the viewing device:

* Upload a landscape image optimized for desktop viewing
* Upload a portrait/square image optimized for mobile viewing
* Apply "Hide on Mobile" to the desktop image
* Apply "Hide on Desktop" to the mobile image

**Result:** Users see the image that looks best on their device without loading both versions.

### Simplified Mobile Layout

Hide elements that clutter the mobile experience:

* Select your social media icons column
* Click "Hide on Mobile"

**Result:** Desktop users see full social options while mobile users get a cleaner, more focused experience.

### Device-Specific CTAs

Create different calls-to-action for desktop and mobile users:

1. Create your primary button frame
2. Duplicate the button frame
3. Select the first button and click "Hide on Mobile"
4. Select the second button and click "Hide on Desktop"
5. Customize the text/styling of each button as needed

**Result:** Desktop users might see "Learn More" while mobile users see a more action-oriented "Download Now."

## How to Apply Visibility Controls

### To Hide Content on Mobile:

1. Select the component you want to hide
2. Open the Email Love Plugin
3. Go to **Mobile Styles**
4. Click the **Hide on Mobile** button

### To Hide Content on Desktop:

1. Select the component you want to hide
2. Open the Email Love Plugin
3. Go to **Mobile Styles**
4. Click the **Hide on Desktop** button

## Preview Your Changes

You don't need to export your email to see how it looks on different devices:

1. Keep the Email Love Plugin open
2. Use the device toggle at the top of the plugin
3. Switch between **Desktop** and **Mobile** views
4. Watch your visibility changes take effect in real-time

**What you'll see:**

* Components with "Hide on Mobile" will disappear in mobile preview
* Components with "Hide on Desktop" will disappear in desktop preview
* All other content remains visible on both devices

## Best Practices

### Keep Mobile Simple

Mobile screens are smaller and users often scan quickly. Consider hiding:

* Lengthy secondary text blocks
* Decorative images that don't add value
* Extra navigation options
* Complex multi-column layouts

### Don't Hide Your Core Message

Never hide essential elements like:

* Your primary call-to-action
* Key product information
* Important brand elements
* Critical links or offers

### Test Both Views

Always preview both desktop and mobile versions before exporting. Make sure:

* Your layout still makes sense on each device
* Nothing critical is accidentally hidden
* The mobile experience feels natural, not sparse

### Consider Performance

Hiding content on mobile doesn't reduce file size. The HTML still contains both versions. For heavy images, consider:

* Optimizing image file sizes
* Using modern image formats (WebP)
* Balancing visual quality with load times