CSS - How to change font size to fit into phone viewport

[BruceSchueller]

The font size I selected for my page works well for all views (devices) with the exception of the cell portrait view. How would I change the size of the font for just that view?

[Teodor]

Method 1:
Use the design panel and design your text per small screens.

Method 2:
Use CSS Media Queries and adjust the font size as you need, example:

@media (max-width: 480px) {
  .my-text {
    font-size: 0.75em;
  }
}

[Teodor]

Also you can check:

Truly responsive text with CSS CALC function

Responsive text I know that we can make text responsive by using media queries but personally I am not keen on this approach Firstly it is a bit cumbersome to write and secondly the transitions are not smooth as the viewport reduces, the text “jumps” when passing the transitions So I thought I would share how implement responsive text by the use of CSS Calc function So let’s say I want text to start at 12px up to 400 pixels screen width then increase to a maximum of 24px at resolutions of 1…

[ben]

I tend to include font sizing for headings in all of my style sheets as follows (SCSS)

@include media-breakpoint-down(lg) {
  legend {
    font-size: calc(1.275rem + 0.3vw) ;
  }
  h1, .h1 {
    font-size: calc(1.375rem + 1.5vw) ;
  }
  h2, .h2 {
    font-size: calc(1.325rem + 0.9vw) ;
  }
  h3, .h3 {
    font-size: calc(1.3rem + 0.6vw) ;
  }
  h4, .h4 {
    font-size: calc(1.275rem + 0.3vw) ;
  }
  .display-1 {
    font-size: calc(1.725rem + 5.7vw) ;
  }
  .display-2 {
    font-size: calc(1.675rem + 5.1vw) ;
  }
  .display-3 {
    font-size: calc(1.575rem + 3.9vw) ;
  }
  .display-4 {
    font-size: calc(1.475rem + 2.7vw) ;
  }
  .close {
    font-size: calc(1.275rem + 0.3vw) ;
  }
 }

For normal CSS the media query reads

@media (max-width:1200px)