Reponsive Text

Question

Does anybody know how i can make h1 responsive? It keeps showing large text on mobile browser mode

HTML: <div class="index__content"> <h1 style="color:#CC9900">DREAM</h1>

CSS:

index__content{
    position:absolute;top:50%;left:50%;
    -webkit-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);
    width:100%;
    max-width:655px
}

https://css-tricks.com/viewport-sized-typography/ – Sven van de Scheur Jan 09 '17 at 12:33 — Sven van de Scheur, Jan 09 '17 at 12:33

score 1 · Answer 1 · answered Jan 09 '17 at 12:35

1

For the h1 tag (or anything else) I suggest using vw font-size units, or a combination like:

font-size:calc(1.1em + .3vw);

answered Jan 09 '17 at 12:35

vsync

118,978
58
307
400

Didn't work Here is the page https://www.coco-mat.com/ The text: "SLEEP ON NATURE WAKE UP IN A DREAM" – P. Tzik Jan 09 '17 at 12:57
@P.Tzik - it does work, I just tried. you must play with the values. try `calc(1.2em + .4vw)` – vsync Jan 09 '17 at 13:02

score -1 · Answer 2 · answered Jan 09 '17 at 12:59

-1

You can use viewport units to scale your text based on width/height of screen. For your case - applying xvw ('x' is desire number) as font-size.

Example -

h1 {
  font-size: 5vw;
  }

<h1>Hello, I'm heading</h1>

Here is support table from caniuse.com

answered Jan 09 '17 at 12:59

Kalpesh Singh

1,649
13
16

Thanks i added your code but when i view it on mobile text ''SLEEP ON NATURE WAKE UP IN A DREAM'' seems a bit small. Any suggestions? – P. Tzik Jan 09 '17 at 15:26
Use media query so that you can increase `font-size` on mobile. For example - @media only screen and (max-width: 480px) { h1 { font-size: 8vw; } } – Kalpesh Singh Jan 09 '17 at 16:25

Reponsive Text

2 Answers2