How To Use Multi CSS Unit Selection in Tekmatix Funnel & Website Builder for Precise Styling

Styling your funnels and websites just got more flexible in Tekmatix. With the new Multi CSS Unit Support, you now have full control over how elements are sized and positioned — no coding needed.

Whether you’re adjusting margins, padding, width, or height, this update allows you to choose from a variety of CSS units with a simple dropdown: px, %, em, rem, vh, and vw.

This makes fine-tuning layout and responsiveness easier than ever, especially for users who want pixel-perfect design or mobile-optimized content.

Why This Update Matters

Previously, styling elements in the builder meant typing units manually or being limited to default settings. Now, you can:

• Choose from multiple unit types in a dropdown
  

• Instantly preview and apply changes
  

• Seamlessly switch units for responsiveness
  

• Avoid CSS errors from mistyped values

Whether you’re a designer or a marketer, this empowers you to build professional-looking pages faster without relying on external tools or developers.

Step-by-Step: How to Use Multi CSS Unit Selection

Step 1: Open Your Funnel or Website

• Navigate to Websites & Funnels from your Tekmatix dashboard.
  

• Select the project you want to edit.
  

Step 2: Choose the Element You Want to Style

• Click on any section, row, column, image, or text block.
  

• The right-hand Settings Panel will open.
  

Step 3: Find the Styling Property You Want to Edit

• In the Style tab, look for properties such as:

  • Padding
    

  • Margin
    

  • Width/Height
    

  • Max-width, etc.
    
    

Step 4: Use the New Dropdown to Select a Unit

• Next to the input field, click the unit selector dropdown.
  

• Choose one of the available CSS units:

  • px – pixels (absolute sizing)
    

  • % – percentage of the parent element
    

  • em / rem – scalable typography-based sizing
    

  • vh – relative to viewport height
    

  • vw – relative to viewport width
    

Step 5: Watch It Update in Real Time

• Once a unit is selected, changes are instantly visible on your canvas.
  

• You can continue experimenting or switch units at any time.

Example Scenario

Scenario: You’re designing a hero banner for a funnel and want the text box to adapt across devices.

• You set padding to 5% for fluid spacing relative to screen width.
  

• For font sizing, you use em so it scales with the parent container.
  

• You adjust the height using vh to fill 70% of the visible screen, giving it a full-screen look on any device.

Result: A fully responsive hero section without touching any CSS code.

Pro Tips

• Use px for consistent element spacing in fixed layouts.
  

• Use % or vw/vh for mobile responsiveness.
  

• Use rem over em when you want consistent spacing across nested elements.
  

• You can switch between units freely — perfect for A/B design testing.

Final Thoughts

This small but powerful change to the Tekmatix builder improves design precision and makes layout styling more accessible for everyone — from beginners to advanced users.

With unit-based flexibility built directly into the interface, your website and funnel designs can now look great on every screen with less manual effort.