As customers use different devices to shop online, the top concern of web owners is that their website is easily accessible no matter what device it is. 

Understanding this, Magezon Page Builder gives you full control over responsive design so that your websites will look perfectly on any screen size. Of course, no coding skills are required. 

We’ve discussed Responsive feature with overview information; and in this post, we’ll give you more details on responsive options that Page Builder provides.

Magezon Page Builder allows you to control the responsiveness on 5 screen sizes: 











Control Column Size on Different Devices

The most simple way to make your layout responsive is set a certain value for column width in Width field on the top. Then set value in Width column like in the image here. 

The value in Width field on the top is the value set for Tablet Portrait. For example, we choose 6 columns - 1/2 in Width field on the top, it means that the column width displayed in Tablet Portrait is ½. 

- With Desktop, when you choose Inherit from smaller, it means that the column width in desktop will inherit the column width from smaller device that is Tablet Landscape. As in Tablet Landscape, you choose Inherit from smaller, so the column width in Tablet Landscape will inherit from Tablet Portrait that is 6 columns - ½. Therefore, the column width in Desktop is also 6 columns - ½. 

- With Mobile Landscape, when you choose Inherit from smaller, the column width in this device will inherit from smaller device that is Mobile Portrait. In Mobile Portrait, for example, we choose 12 columns - 1/1, so the column width in Mobile Landscape is 12 columns - 1/1.

Control column size on different devices
Control column size on different devices

In some special cases, if you want to set different column width for each device, you can choose specific values for each device in Width column.

Define Offsets

The offset works like a blank space that stays between a column and the column before it. And you can define different offsets on different devices.

Define offsets

Hide Columns on Specific Devices

With one single click, you can hide columns on specific devices to create the best layout for each device. 

Preview Right in Backend

By switching between devices right in the backend, you can preview column sizes and column visibility on different devices. 

Preview right in backend

Why Everyone Loves Magezon Page Builder?

Fast and Easy

Intuitive Interface

No Coding Skills

Mobile Ready

SEO Friendly

Magento WYSIWYG Integration

50+ Elements

Best Support