# Responsive design

The Funnelish page editor allows you to build responsive web pages for your eCommerce. We offer multiple features that make responsiveness easier to use without complicating the page builder. 

## Responsive features

#### 1. Hide/Show Elements per Device (Visibility features)

You can hide any element, section, or row on a specific device while keeping it visible on others.

* Example: Hide a large image on mobile while keeping it visible on desktop.\
  ⚠️ Tip: Use this sparingly. Most layouts can be built without duplicating elements.

{% hint style="warning" %}
We recommend not abusing it often, as most designs can be built without resorting to it.
{% endhint %}

<figure><img src="/files/GXtEBHcuYdJM0TOaaMDN" alt=""><figcaption></figcaption></figure>

#### <mark style="color:orange;">2. Responsive Properties (NEW)</mark>

Now, every element property in Funnelish can have its own **device-specific settings**.

\
You’ll see a device toggle icon next to each property:

* **All devices** → The value applies to all devices.

<figure><img src="/files/egk3UcDr0JEDqFV2A2AP" alt=""><figcaption></figcaption></figure>

* **Desktop only** (or Mobile/Tablet only) → The value is applied only to that device.

<figure><img src="/files/YAyHGaMQag2qJGB5PmgO" alt=""><figcaption></figcaption></figure>

This works for **all properties**, including:

* Font size & style
* Alignment (text, images, containers)
* Margins and padding
* Background color
* Orientation (for containers)
* And more.

✅ Real example: Set a headline background to red on desktop and purple on mobile, **without hiding/re-adding the element.**

<figure><img src="/files/OyGu4x3JOj6LiBoK6I3M" alt=""><figcaption><p>Setting a different background on mobile/desktop <strong>without</strong> hiding/re-adding the element.</p></figcaption></figure>

✅Other real example: Let’s say you have an image aligned to the right on desktop. On mobile, that may not look great.

1. Switch to the **mobile view** (top of canvas → phone icon).
2. Select the image.
3. In the side panel, change the alignment to **center**.
4. Save changes.

Now the image stays **right-aligned on desktop** but **centered on mobile**.

#### How Defaults Work

When you first set a responsive property in the **desktop view**, Funnelish copies that value to tablet and mobile. You can then adjust each device individually.

### Creating Device-Specific Layouts (when needed)

Some components don’t support property-level responsiveness. In those cases, you can still create **device-specific versions** of the same element using the responsive visibility tool:

**Example:**

1. Add your element (e.g. Custom HTML block). The actual HTML can not be different on Desktop/Mobile without hiding & re-adding. Only its alignment and margins can have different values.
2. In the left panel → **Responsive section**, enable/disable which devices it appears on.
   * Example: Desktop ON, Mobile OFF.
3. Duplicate the element and set the opposite visibility.
   * Example: Mobile ON, Desktop OFF.
4. Save changes.

This way, you can create **completely different layouts per device** if needed.

### Results

* **Responsive properties** = tweak settings (font, alignment, spacing, etc.) per device.
* **Responsive visibility** = show/hide elements per device when layouts must be different.

{% hint style="success" %}
Combined, these features let you build truly responsive pages without hacks or workarounds.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.funnelish.com/advanced-features/responsive-design.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.