Adapt to Tablet / Mobile

Move on to tablet and mobile adjustments when you are happy with your desktop version.

Adapting to tablet and mobile mostly involves resizing and repositioning your widgets and sections using drag-and-drop functionality.

Feel free to drag to resize, move and adjust widgets, as it won't affect your desktop version in any way. Editing content input; deleting content, line breaks, or correcting spelling, will make changes across all devices.

Adapting Pinned Elements

Headers often have a pinned position and a width of 100%. This will reflect across all devices and minimal adjustments are needed.

Adapting Full-Size Sections 

Sections with 100% height will reflect across all devices.

You can switch from percentage height to pixel height on tablet and mobile without it affecting desktop, as this is a setting from the right panel editors.

Adapting Regular Sections/Regular Content

Regular sections are sections with a pixel value height. Regular widgets are positioned and sized using pixel values. This is where Vevs adaptive design becomes relevant.

When you add content to a regular section, tablet and mobile view inherits both the position and the size of the content. You are free to edit these values as you like across the devices to create the exact look you want.

These sections might seem like a lot of work to adapt to smaller devices, but here we'll teach you some tips and tricks to make the work faster and smoother.

Positioning

We have a shortcut to move content from its inherited position into the tablet or mobile Safe Zone (within the stapled vertical lines).

The Stretch function is usually used to stretch content 100% across the Safe Zone (or entire canvas if the content is Pinned).

If you select a widget and click the Strech horizontally once, the widget will stretch across the Safe Zone (width 100%). If you then click a second time, the values will automatically switch from percentage to pixels. Now you only have to make small adjustments to make sure the widget has the size and position you want.

You are also free to position content by simply dragging and dropping the widget in place.

Frames

For content closely connected, it might be easier to adapt to tablet and mobile if you create a Group (select content and click Command+g). The content is now grouped together within a frame, and the contents origin switches to be within the frame.

Example

From this point, you can set the image to fill the frame 100% in both width and height, and set the origin for the different components close to their position.

This enables you to simply resize the frame to adapt the content to tablet and mobile.

Drag-and-Drop

In most cases dragging and dropping content, and editing the content as you like on tablet and mobile using the right panel editors, is the way to go.

Text

To make it easier to adapt the text to different devices, it is crucial that you use Text Styles. If you use Styles you'll only have to edit the text format on each device once, and it will reflect on all text boxes with the given style.

Read more about styles here.