Metrik - Webflow Professional Partner badge

Topic:

Responsive design

Styling on different (responsive) breakpoints in templates

Styling on different breakpoints
The most frequently set breakpoints in templates

All templates are designed for larger, desktop, tablet, and mobile breakpoints.

Only Body Size is applied to screens 1440px wide and above, 1920px and above. You don't need to override the styles of any element in these breakpoints. All elements scale up by Body Size.

If you want to resize all the elements on the website for larger screens, you must change the Body Size. This slight change affects all elements because the template uses "em" unit size.

Breakpoints that using only Body Size:

  • 1920px: styles applied to screens 1920px wide and above
  • 1440px: styles applied to screens 1440px wide and above

Main Breakpoints:

  • Desktop (base): styles apply to all devices unless overridden at other device breakpoints
  • Tablet: styles applied to screens 991px wide and below
  • Mobile landscape: styles applied to screens 767px wide and below 
  • Mobile portrait: styles applied to screens 478px wide and below

Uselful tip

You can delete larger breakpoints with Finsweet Extension to prevent accidentally changing element settings on the larger breakpoints and add custom code to the Global Style symbol (embedded code symbol, included on all templates).

Custom code that can replace the native Body Size settings on larger breakpoints:

<style>
@media only screen and (min-width: 1920px) {body {font-size: 16px;}}
@media only screen and (min-width: 1440px) {body {font-size: 15px;}}
</style>

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.

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