font-size same as element width

Question

Example: http://www.jpeg.cz/images/2016/05/04/uEf8S.jpg

Hello, is it possible to make font-size same width as element and make it responsive or it must be fixed on every resolution ?

HTML:

<h1>Lorem ipsum dolor!</h1>
<div id="form-wrapper">
    <form action="#" method="post">
        <input type="text" name="fullname" placeholder="Jméno a příjmení" />
        <input type="email" name="email" placeholder="E-mail" />
        <input type="tel" name="tel" placeholder="Telefon" />
        <input type="submit" value="ODESLAT" />
    </form>
</div>

CSS:

@media only screen and (max-width: 767px) {
    section h1 {
        font-size: xx;
    }
    #form-wrapper {
        width: 320px;
    }
}

@media (min-width: 768px) { 
    section h1 {
        font-size: xx;
    }
    #form-wrapper {
        max-width: 425px;
    }
}

@media (min-width: 1200px) { 
    section h1 {
        font-size: 50px;
        font-size: 3.125rem;
    }

    /* form */
    #form-wrapper {
        max-width: 590px;
    }
}

Possible duplicate of [Font scaling based on width of container](http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container) — Gavin Thomas, May 04 '16 at 10:06

score 0 · Answer 1 · answered May 04 '16 at 10:02

Not relative to the containing element, but you could give a look/try to the viewport relative units vw,vh,vmin,vmax.

Docs: https://developer.mozilla.org/en/docs/Web/CSS/length#Viewport-percentage_lengths
Browser support: http://caniuse.com/#feat=viewport-units

score 0 · Accepted Answer · edited May 23 '17 at 12:31

0

Fiddle Demo

h1{ 
     text-transform:uppercase;
    margin: 0px 0px;
    font-size: 18px;
    text-align:center;
    letter-spacing:.8px;
       font-size:6.4vw; }

Doc Source Here

edited May 23 '17 at 12:31

Community

1
1

answered May 04 '16 at 10:22

USER10

939
11
28

font-size same as element width

2 Answers2