Responsive Design Options

This feature is introduced in every single shortcode used by Urus Elements. You can set advanced settings for your shortcode here.

  1. Responsive breakpoints: Set some specific style breakpoints for different devices. If you want all breakpoints has the same settings, just need to configure for desktop only.
    • Desktop: Screen resolution >= 1500px
    • Laptop : Screen resolution <= 1499px
    • Tablet: Screen resolution <= 1199px 
    • Ipad: Screen resolution <= 991px
    • Mobile: Screen resolution <= 767px
    • Small mobile: Screen resolution <= 480px
  2. Target main: specify the main .classname or #elementID of the element will be styled
  3. Set Margin/Border/Padding for the element in every single direction (top/bottom/left/right). Accepted values is a number in pixels
  4. Border color: Set border color
  5. Border Style: Choose among predefined border style
  6. Border radius: Set border radius
  7. Background: Set background for the element
  8. Select background image for the element from the gallery
  9. Set background style: cover/contains/repeat/no-repeat
  10. Simplify Controls: When this checkbox is checked, the 
    [3] Margin/Border/Padding settings will be simplified, you only need to input one value to applied for all four directions
  11. Disable background (On/Off): when this option is On, the element won’t display background
  12. Disable element (On/Off): when this option is On, the element will be hidden on this specific responsive breakpoints. For example, you want the element will be displayed on desktop but not on mobile, you will need to set this option On on the mobile tab at number [1]
  13. Width on … (breakpoints): set exactly width of the element in current breakpoints
  14. Unit: the width unit will be used (percent, pixels, em…)
  15. Letter Spacing: Set letter spacing for this element
  16. Text align: Set text align for this element
  17. Font size: Set font size for this element
  18. Line height: Set line height for this element
  19. Use theme default font family (On/off): By default, we will use theme used font family. If this option set to off, there will be drop down lists for you to choose your custom font family
  20. Text color: Set text color for this element
  21. Target child: specify the children .childClassName or #childElementID of the child element will be styled
  22. Custom CSS: Add your custom CSS code to this element
Was this page helpful?