Fixing the mobile website display issues

Does your website's content on your mobile device appears squished? 

User-added image

This problem can be easily corrected by reducing the settings of the margins and paddings of your pages’ widgets. High settings could cause the content to not properly adjust to the mobile view on your pages. To fix these settings, perform the following steps until your screen is corrected:

1. Check the margins by clicking Margin in the upper left hand corner of the widget.

User-added image


The Edit Margin window opens, which will allow you to adjust the margins around the outside of the widget. You can either adjust each box manually by entering the desired value, or you can adjust each equally by moving the slider bar left or right. Note: Remember to select rem.

 

User-added image


2. Check and make sure the left content padding and the right content padding are not set too high. This can be adjusted by opening your Sitebuilder and going to StyleDesigner. In the "Layout" section, click Content Padding.


User-added image


You can reduce padding by clicking on Right or Left of the padding settings and then either manually inputting the individual value or by moving the slider bar up or down.

3. Check and make sure the settings for the left body padding and right body padding are not set too high. Adjust them by opening your Sitebuilder and going to Style Designer. In the "Layout" section, click Body Padding.


User-added image


You can reduce padding by clicking on Right or Left of the padding settings and then by either manually entering the value or by moving the slider bar up or down.

4. If you have a Panel widget in your Sitebuilder, you should also check its margin, padding, and content width settings. To do this, click Edit in the upper right-hand corner of your Panel. Once the Panel widget’s editing box appears, click Spacing.

User-added image


Adjust the padding and margins individually by manually entering the desired value into each box in the diamond formation (top, right, bottom, left). You can also have each created equally on all sides by dragging the slider to the right to increase the margin size and to the left to decrease it. The Content Width should be set at 100%.

Once you’ve adjusted the settings to your liking, click Save.

Was this article helpful?
0 out of 0 found this helpful