Search code examples
htmlcssresponsive-designcss-gridfont-size

CSS-Grid and font-size with em doesn't seem to work responsively

For the first time i'm using grid-areas in this website for layout. Why doesn't the font-size change when the site gets smaller?

I tried to start using em for the top right area #benefits for instance but it doesn't seem to do anything. Is it because i am declaring the body font-size or doesn't grid support it?

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');

body {
    font-size: 62.5%;
    /* color: white; */
}

* {
    margin: 0;
    padding: 0;
}

main {
    display: grid;
    grid-gap: 1.5rem;
    width: 100%;
    height: 250px;
    grid-template-areas:
        "nav head benefits"
        "nav section news"
        "foot foot foot";
    grid-template-rows: 250px 600px 300px;
    grid-template-columns: 0.5fr 3fr 1fr;
}

#wrapper {
    margin-top: 0;
    max-width: 70%;
    margin: 0 auto;
    /* background-color: black; */
    height: 100vh;
}

main>#main-header {
    grid-area: head;
    background-color: aliceblue;
}

main>#benefits {
    grid-area: benefits;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}

main>#main-navigation {
    grid-area: nav;
    background-color: black;
}

main>#main-section {
    grid-area: section;
    background-color: red;
}

main>#main-news {
    grid-area: news;
    background-color: gray;
}

main>#main-footer {
    grid-area: foot;
    background-color: hotpink;
}

header#main-header div {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}

header#main-header h1 {
    font-size: 3em;
}

header#main-header p {
    font-size: 1.2em;
    font-weight: 600;
}

aside#benefits h2 {
    font-size: 1.8eem;
}

aside#benefits ol {
    text-align: left;
    list-style: decimal;
    padding-left: 1em;
    font-size: 1.2em;
    font-weight: 600;
}

nav header {
    display: flex;
    flex-direction: column;
    color: white;
    align-items: center;
    justify-content: center;
    height: 250px;
}

nav header h1,
nav header h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
}

nav#main-navigation {
    color: white;
    background-color: black;
    display: flex;
    flex-direction: column;
}

nav div {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-around;
}

ul {
    text-align: center;
    list-style: none;
    font-size: 1.5rem;
}

li {
    margin: 0.5rem 0 0.5rem 0;
}
<!DOCTYPE html>
<html>

<head>
    <title>Willkommen beim Eldur Verlag</title>
    <link rel="stylesheet" href="eldur.css">
</head>

<body>
    <div id="wrapper">
    <main>
        <header id="main-header">
            <div>
                <h1>Willkommen beim Eldur Verlag!</h1>
                <p>
                    Wir sind ein Verlag für düstere Literatur. Horror, Science-Fiction, Fantasy, Thriller.<br>
                    Sehr selten auch mal Humor oder Sachbuch.
                </p>
            </div>
        </header>
        <aside id="benefits">
                <h2>Fünf gute Gründe, direkt bei uns zu bestellen:</h2>
                <ol>
                    <li>Keine Versandkosten innerhalb EU + Schweiz.</li>
                    <li>Vorbesteller von Neuerscheinungen erhalten unsere Titel zum Vorzugspreis und deutlich früher als
                        der
                        Buchhandel.</li>
                    <li>Sie unterstützen Verlag und Autoren, da doppelt so viel Gewinn bei uns hängenbleibt.</li>
                    <li>Kein Newsletter- und Werbespam!</li>
                    <li>Individuelle Kundenbetreuung.</li>
                </ol>
        </aside>
        <nav id="main-navigation">
            <header>
                <h1>Eldur</h1>
                <img src="img/logo/eldur-scifi.png" height="150px" width="150px" alt="">
                <h2>Sci-Fi</h2>
            </header>
            <div>
                <ul>
                    <li>Alle Bücher</li>
                    <li>Horror</li>
                    <li>SCI-Fi</li>
                    <li>Fantasy</li>
                    <li>Thriller</li>
                    <li>Allgemein</li>
                    <li>Antiquariat</li>
                </ul>
                <ul>
                    <li>Wir über uns</li>
                    <li>Unsere Autoren</li>
                    <li>Sie sind Autor?</li>
                    <li>Downloads</li>
                    <li>Blog</li>
                    <li>News</li>
                </ul>
            </div>
        </nav>
        <section id="main-section"></section>
        <aside id="main-news"></aside>
        <footer id="main-footer"></footer>
    </main>
    </div>
</body>

</html>

Solution

  • That is because you declare your font-sizes relative to either:

    1. font-size of the <html>-element <= rem,
    2. current font-size of the very elements (inherited from its parent elements up to the root element or even browser font-size) <= em.

    To achieve responsive font-sizes you have to use viewport percentage lengths like vw or vh within your font-size-rules.

    Below, a responsive example using vw and clamp(). Between 400px and 1200px viewport width, it makes the font-size grow dynamically from 2.0625rem to 2.8125rem relative to viewport width. Ignore the odd looking rem values and have a look at the vw therein, doing the responsive "magic":

    h1 {
  font-size: clamp(2.0625rem, 2.0625rem + 12 * (100vw - 400px) / 800, 2.8125rem);
}