Pingendo Help Center

Viariable font size for different screen sizes


What’s the best way to vary the font size of H1 for smaller screens?

I’m using the landing page template and the heading at the top of the page does not fit on a small phone as size 1. Size 4 fits nicely, but I still want size 1 for other larger screens.

Any help welcome.



Bootstrap does not support different heading font size for different resolutions.
But you can easily do it with few lines of Sass , using the builtin sass code editor
Here an example

@include media-breakpoint-down(sm) {
  h1 {
  	font-size: 20px;

This will use media-breakpoint-down mixin to set h1 font-size to 20px for extra small breakpoint.

more info here


Thank you for the suggestion. There’s a thought for the bootstrap developers… images automatically resize, so test resizing too would be great :slight_smile:

I’ll implement your suggestion.