How to fix mobile size issues?

If your website layout and text appear distorted or out of place on mobile devices, it’s likely due to custom size settings.

The reason why it happens:

1. Custom Height and Width settings:

The issue arises because you’ve set fixes in pixels "Height" and "Width" values for your layout. These fixed sizes apply across all devices, which is why the design looks distorted on different screen sizes.

1. Min/Max layout size configurations:

When you set "Min" or "Max" size values for layouts designed on wide screens, these settings carry over to mobile views, causing the design to look misaligned.

Steps to resolve mobile size issues:

1. Go to "Page Structure" in right toolbar of your website builder;
2. Go through the entire layouts structure and check all elements with "Horizontal" and "Vertical" layout types;
3. In the right toolbar select "Size", and check all elements:
   • "Width" should preferably be "100%" or "Auto";
   • "Height" should be "Auto";
   • All "Min" and "Max" checkboxes in Size section should be off (This ensures your layout automatically adapts to different screen sizes).
4. Check elements on each page;
5. Click on the "Preview" to check the result.