How do I edit the Tablet and Mobile versions of my page?

Author: administrator 349 views

Do you know that you can configure your page appearance in different device screen resolutions (mobile/tablet)? Let’s find out what Ecomposer offers with responsive option.

1. Responsive Mode

Some templates and elements are built and tested automatically for device-responsive, but if you want to make sure how they look on each device, you can check these following options.

  • Click the Monitor icon on your editor page and choose between Desktop mode () Tablet mode () or Mobile mode () to see how your design looks in different screen sizes.
  • Responsive settings allow you to set Width of the screen that you want to test on.For instance, Iphone 13 Pro Max Viewport Size is 428px × 926px > simply just click in responsive > choose to add new breakpoint and input the Iphone 13 Pro Max Viewport Width which is 428px.
Switch between devices view

2. Edit page for different devices.

  • When you choose, for example, Mobile View mode, all changes made in Mobile View mode will not be applied to other view modes. Same to Desktop View mode and Tablet View mode, meaning that you can design how your page looks on Desktop, Mobile and Tablet independently. Let’s check the video below to see what we can do.
Edit page appearance independent on different devices

Leave a Comment

On this page
Start a free trial and enjoy 3 months of Shopify for $1/month on select plans.