Styling on different (responsive) 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>