How to edit Mobile/Tablet view of your Website

All the blocks and elements on SpringBuilder are smart enough to adapt to all devices, so your website will look perfect on different PCs, tablets and mobile phones. However, sometimes the Mobile or Tablet view might not look exactly like you wanted your website to look like on mobile devices.

We have several solutions for that.

Changing the Distance between Blocks and Elements

You can change the Distance Between Blocks and Elements in Mobile by doing these steps:

  1. Go to the Edit mode of your Website.
  2. Navigate to your Dashboard.
  3. Go to Designer Tools App.
  4. Go to Layout.
  5. Edit the distances.

Duplicating method

You can also duplicate Elements/Blocks and set the visibility for one of them to Desktop only, while the other one on Mobile/Tablet. That will allow you to edit the looks of your Website without affecting the Desktop version.

To do so simply:

  1. Duplicate the Element/Block. You can duplicate items on your website by holding Ctrl C/Command C and dragging them to a new position.
  2. Change the visibility for the first Element/Block to Desktop only.
  3. Change the visibility for the second Element/Block to Mobile/Tablet only.
  4. Edit your Desktop and Mobile view individually.

You can read more about managing Visibility Settings of Elements and Blocks in this article.

How to duplicate Elements/Blocks

To duplicate an Element simply press and hold Ctrl C/Command C and drag the Element to a position you intend it to be.

How to duplicate Blocks

Similarly with Elements, you can duplicate entire Blocks. Just hold Ctrl C/Command C and drag the block above or below.

How to add Elements next to each other horizontally

Here is a short tutorial on how to add Elements next to each other horizontally. Simply drag one of the Elements and move it to the edge of the block until you see a single big grey line appear, indicating that you will add a new column to your block.

It might happen that your Elements do not align next on the same line at first. To fix that simply right-click on one of the Elements and change Vertical Alignment settings to match the other Element.

Did this answer your question?