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
- 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.
- 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).
- 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.
- 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.
- 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 brokeeach device has its own styles; select the phone frame and correct it there.
- I can't switch to desktop on a landing pageit is one of the older landing pages; those are mobile-only.
- Too many product columns on phonesselect 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 differsclick Preview in the top bar and open the live page on your phone; make sure you clicked Save first.