How to edit Mobile/Tablet view of your Website
All the blocks and elements on Ucraft 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 how you wanted it to.
We have several solutions for that.
Changing the Distance between Blocks and Elements
You can change the Distance Between Blocks and Elements for your Mobile view by following the steps below.
- Go to the Edit mode of your Website.
- Navigate to your Dashboard.
- Go to Designer Tools App.
- Go to Layout.
- Edit the distances.
You can also duplicate Elements/Blocks and set the visibility for one of them to Desktop only, while the other one to Mobile/Tablet. This will allow you to edit the look of your Website on Tablets and Mobiles, without affecting the Desktop version.
To do so, simply:
- Duplicate your Block/Element dragging and dropping them to a new position, while holding the 'Ctrl' key on your keyboard.
- Change the visibility of the first Element/Block to Desktop only.
- Change the visibility of the second Element/Block to Mobile/Tablet only.
- 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
As mentioned before, simply hold the 'Ctrl' key on your keyboard, then drag the element to your desired area.
- Note: On the Free Website plan you can only duplicate basic Elements that are included in the plan.
How to duplicate Blocks
Similarly with Elements, you can duplicate entire Blocks. Just hold 'Ctrl' key and drag the block above or below.
Note: On the Free Website plan you cannot duplicate blocks that contain Elements that do not belong to your plan.
How to add Elements next to each other horizontally
To align elements, simply move one of the elements to the edge of the block until you see a single, thick, grey line appear. This indicates 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.