Designing in Showit gives you full creative freedom, but that flexibility also means you need to intentionally manage what shows up on desktop versus mobile. One of the most common questions new users ask is how to hide elements on mobile or desktop without breaking their layout.

This guide walks you through exactly how to hide elements in Showit, explains common mistakes, and shares best practices for clean, professional layouts.

Watch the Video Tutorial: How to Hide Elements in Showit

If you prefer to follow along visually, I’ve created a quick video tutorial showing exactly how to hide elements on mobile or desktop in Showit.

In this walkthrough, you’ll see:

• Where to find the mobile and desktop visibility icons
• How to hide individual elements without affecting your entire layout
• The difference between hiding an element versus a full canvas
• Common mistakes that cause layouts to break

👉 Watch the full Showit tutorial here:

Tip: Open your Showit editor in another tab so you can pause and apply each step as you go.

Why You Might Want to Hide Elements in Showit

Hiding elements allows you to tailor your design for different screen sizes without duplicating entire pages. Common reasons include:

• Removing large images on mobile to reduce scrolling
• Using different headline sizes for desktop and mobile
• Hiding decorative elements that clutter small screens
• Showing shorter copy on mobile for readability

Because Showit does not auto-stack or auto-adjust layouts, hiding elements is a key part of mobile optimization.

How to Hide Elements on Mobile or Desktop in Showit

Step 1: Select the element

Click directly on the text, image, button, or shape you want to hide. You must select the individual element, not the canvas.

Step 2: Open the Design Settings panel

On the right-hand side of the Showit editor, locate the Design Settings panel.

Step 3: Use the visibility icons

You will see two icons:

• Desktop icon
• Mobile icon

Click the icon for the device you want to hide the element on.

• Dark icon means the element is visible
• Gray icon means the element is hidden

The element will now be hidden only on that device.

Hiding Entire Sections or Canvases

If you want to hide an entire section, select the canvas instead of the individual element. This is useful for:

• Removing full hero sections on mobile
• Creating mobile-only or desktop-only sections

Be careful with this. Hiding a canvas removes all spacing and content inside it.

Common Mistakes and How to Fix Them

The element disappeared everywhere

This usually happens when the canvas was hidden instead of the individual element. Re-select the element inside the canvas and adjust visibility there.

I don’t see the mobile or desktop icons

The visibility icons only appear when an element is selected. Click directly on the item, not the background.

My layout still looks off after hiding elements

Hiding an element does not automatically collapse spacing. You may need to adjust padding, margins, or reposition remaining elements.

Pro Tip: Duplicate Instead of Hiding for Better Control

For more advanced layouts, duplicate an element and style each version separately.

Example:

• One headline optimized for desktop
• One shorter headline optimized for mobile
• Hide each version on the opposite device

This approach gives you full design control and often results in cleaner mobile layouts.

Hiding elements in Showit is simple once you know where to look, but it plays a huge role in creating a polished, intentional website. Always review both desktop and mobile views before publishing to ensure spacing and hierarchy still feel right.

Want your Showit site optimized without the guesswork?
Work with us to refine your desktop and mobile layouts so your website looks intentional, polished, and conversion-ready. Book a call with us www.kemotion.co/contact-general