# Edit the mobile and tablet layout separately

Use the device switcher in the editor's top bar (phone, tablet, desktop). Any change you make in the **Styles** tab while a device is selected applies only to that screen size; block settings such as "Number of items in mobile" set columns per device.

## Steps

1. Open **Online Store → Theme Settings** or your landing page. In the top bar, click the phone icon (768px frame) or tablet icon (991px frame). The desktop icon returns to full width; a fullscreen toggle enlarges the canvas.
2. Click a block, open the pencil icon → **Styles**, and adjust spacing, dimensions, typography or position. The "Applied on" notice confirms the change goes to Mobile (up to 768px) or Tablet (up to 991px).
3. For grids, use the block's **Settings** tab instead: **Product List** design 3, **Slider** designs 4 and 5 and **Testimonials** offer **Number of items in grid / mobile / Tablet**.
4. On a **Product Bundles** block, turn on **Keep desktop view on mobile** if you want the offer tiers to keep their desktop arrangement on phones.
5. Switch back to desktop and check nothing changed there, then click **Save** and confirm the page is **Published**.

Note: some older landing pages are pinned to the 768px mobile frame and cannot switch to desktop or fullscreen.

## Common problems

- I changed padding on desktop and the mobile page broke → each device has its own styles; select the phone frame and correct it there.
- I can't switch to desktop on a landing page → it is one of the older landing pages; those are mobile-only.
- Too many product columns on phones → select the Product List block and lower **Number of items in mobile** (design 3), or pick that design from the **Variants** tab.
- The editor looks right but my real phone differs → click **Preview** in the top bar and open the live page on your phone; make sure you clicked **Save** first.

## Related
- [Style a block: spacing, background, border, shadow, animation](https://help.dropify.shop/en/guides/style-a-block-spacing-background-border-animation/)
- [Open the theme editor and find your way around](https://help.dropify.shop/en/guides/open-the-theme-editor-and-find-your-way-around/)
- [How to set up your home page: hero, sliders and product grids](https://help.dropify.shop/en/guides/set-up-your-home-page-hero-and-product-grids/)