For specific fields
Some element settings can be set for desktop, tablet and mobile devices directly with just one field. Insert values in order of desktop’s value - tablet’s value - mobile’s value and separate theme by commas.
Note: If you only put 2 values, it will be set for desktop and mobile.
Multi-value field examples:
- Font size
- Line height
- Max number of content per row
- Section/ block visibility
- Column width
- Rounded corners
- Content height/ width
- Content position (image crop)
- Section layout
- Font size: 25px, 15px, 20px
→ Desktop: 25px, tablet: 15px, mobile: 20px.
With the sections which have 02+ parts in their layout, please insert the values one by one, from left to right and add a space between 02 values to separate them. The total number cannot be bigger than 100%.
- Column Grid layout: 25% 75%, 100%
→ Desktop: First part takes place of 25% space of the whole section and second part takes 75%
→ Mobile: All parts will be displayed full section's width
Padding, margin, rounded corners,... of main content usually can be modified individually in 4 directions (top - right - bottom - left or 4 corners of a button).
To adjust your content, insert numbers in order of top - right - bottom - left (with content’s padding, margin...) or from upper left corner then follow the clockwise motion (with a button’s corner) and separate them by using blank spaces.
Note: With Padding and Margin fields: - If you only input 3 numbers, the 1st value will be set for the top, the 2nd one for the left & right and the 3rd one for the bottom. - If you only put 2 values, it will be set for top/ bottom then left/ right.
- Padding: 14px 50px, 9px 40px
→ Desktop padding: top/ bottom - 14px, right/ left - 50px
→ Mobile padding: top/ bottom - 9px, right/ left - 40px
- Button rounded corner: 0 10px 20px 30px
Text block position field is used to determine the block position on a main content space. Using the percent unit and insert values in order to Left : Top
Bigger value, farther the block from left/top margin.
- Starting from 0% - The block is placed right next to the left/top margin.
- 50% - The block is placed at the center in vertical (left value)/ horizontal (top value) direction.
- 100% - The block is place right next to the right/bottom margin.