Metrik - Webflow Professional Partner badge

Topic:

Responsive design

How responsive design works in templates

EMs units

All Metrik templates are designed in EM units.

EM units is used for most of all elements in templates
EM units is used for most of all elements in templates

EMs are practical when you want to set proportional padding on an element with text. Every browser has a default font size, which is usually 16px. Ems look to their parent element and scale the font size proportionally.

It is often sufficient if the EM is used for an element on Desktop breakpoints and changing the EM on other breakpoints is not necessary.

Viewport-based units (VW)

Templates use Viewport-based units (VW) font size for Desktop breakpoint. VW is a measurement of the width of the browser’s viewport that scales proportionally based on the width of the viewport.

VW unit used for Size on the Desktop breakpoint
VW unit used for Size on the Desktop breakpoint

Advantages of uisng VW unit

VW units will cause the design to remain the same on the Desktop breakpoint. The elements decrease and increase with the width of the user's monitor. In practice, this means that if you write the title exactly on 2 lines, it will remain on the desktop on 2 lines at any width. The content does not wrap to the next line.

1

Contact forms

Do you need template help?

Do you need template help? You can fill out the form below. I usually respond within 1-2 business days.

Sent!

Thank you for your message. I'll contact you as soon as possible.

An error has occurred somewhere and it is not possible to submit the form. Please try again later or contact us otherwise. Thank you for understanding.

You can leave a template review here.

Feedback is essential for me. Could you send me your testimonial? 🥳

Sent!

Thank you for your testimonial ✌️ I appreciate it a lot.

Juraj

An error has occurred somewhere and it is not possible to submit the form. Please try again later or contact me otherwise. Thank you for understanding.

You can also leave a message through this form. I usually respond within 1-2 business days.

Sent!

Thank you for your message. I'll contact you as soon as possible.

An error has occurred somewhere and it is not possible to submit the form. Please try again later or contact us otherwise. Thank you for understanding.

2

Search from Webflow library of lessons covering everything from layout and typography to interactions and 3D transforms. Highly recommended for beginners.

Webflow University