For specific fields


#1

Some fields’ values can be set for desktop, tablet and mobile devices at once. 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
  • Padding
  • Spacing
  • Margin
  • Line height
  • Max number of content per row
  • Section/ block visibility
  • Column width
  • Rounded corners
  • Content height/ width
  • Content position (image crop)
  • Alignment
  • Section layout
  • …


For example:

  • Font size: 25px, 15px, 20px

→ Desktop: 25px, tablet: 15px, mobile: 20px.



#2

With the sections which have 02+ parts in their layout, insert values one by one, from left to right and add a space between 02 values to separate them. The total value cannot be bigger than 100%.


For example:

  • 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




#3

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.


For examples:

  • 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




#4

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.