Pingendo Help Center

Viariable font size for different screen sizes


#1

Hi
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.

Thanks
David


#2

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 https://getbootstrap.com/docs/4.1/layout/grid/#mixins


#3

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.

Cheers
David