DEV Community

Calin Baenen
Calin Baenen

Posted on

Why is my title shrink when I put it in a div?

I have:

<!-- Header -->
<h1 style="/*positioning*/">
    Test.
</h1>
<!-- Subheader -->
<h2 style="/*ditto*/">
    Subheader.
</h2>
Enter fullscreen mode Exit fullscreen mode

But, instead of wanting to use separate body-level elements, I want to use a div, since I'm guessing that's better (in terms of design).
So I try:

<div style="/*positioning*/">
    <h1>
        Test.
    </h1>
    <!-- etc... -->
</div>
Enter fullscreen mode Exit fullscreen mode

but, my header that says "Test" is smaller inside of my div(???).

This is my CSS:

/* Set default properties for the page style. */
html {
    font-family:"Arial", "Roboto", "Comic Sans", "Comic Sans MS";
    font-weight:bold;
}
button {cursor:pointer, default; cursor:pointer;}


/* Make elements fit their content. */
body, body * {
    /** Height. **/
    /* Maximum. */
    max-height:fit-to-content;
    max-height:-webkit-fit-to-content;
    max-height:-apple-fit-to-content;
    max-height:-moz-fit-to-content;
    max-height:-ms-fit-to-content;
    max-height:-o-fit-to-content;

    /* Minimum. */
    min-height:fit-to-content;
    min-height:-webkit-fit-to-content;
    min-height:-apple-fit-to-content;
    min-height:-moz-fit-to-content;
    min-height:-ms-fit-to-content;
    min-height:-o-fit-to-content;
    /** /Height. **/



    /** Width. **/
    /* Maximum. */
    max-width:fit-to-content;
    max-width:-webkit-fit-to-content;
    max-width:-apple-fit-to-content;
    max-width:-moz-fit-to-content;
    max-width:-ms-fit-to-content;
    max-width:-o-fit-to-content;

    /* Minimum. */
    min-width:fit-to-content;
    min-width:-webkit-fit-to-content;
    min-width:-apple-fit-to-content;
    min-width:-moz-fit-to-content;
    min-width:-ms-fit-to-content;
    min-width:-o-fit-to-content;
    /** /Width. **/



    white-space:nowrap;
    position:absolute;
    display:inline-block;
}
body * * {
    position:relative;
}


/* Set font sizes. */
h1 {font-size:1.75vw;} h2 {font-size:1.25vw;} h3 {font-size:1vw;}


/* Make hyperlinks flush with other text. */
a {
    text-decoration:none;
    color:inherit;
}



/* Dark mode. */
.dark-mode {
    background:#0f0f0f;
    color:#fefefe;
}

/* Light mode. */
.light-mode {
    background:#fefefe;
    color:#000000;
}
Enter fullscreen mode Exit fullscreen mode

Thanks!
Cheers!

Top comments (0)