CODEWITHSUNDEEP
javascripthtmlresize
Tommay
Tommay

Reputation: 1617

How to Change HTML Elements When Window Gets Too Small?

So here's what I've got:

<!DOCTYPE html>
<html>
<head>
    <title>Fonts!</title>
    <link rel="stylesheet" href="fonts.css">
</head>
<body>
    <h1 id="Hagin">Hello.</h1>
    <h2 id="Hagin2">Goodbye.</h2>

    <p class="Glober">Hello. This is a paragraph. It is meant to test this font. What do you think? Do you like this font? I think I do, although I'm not sure. That's why I'm writing this paragraph. Eh? Bigger you say? I agree. Let's make it bigger. Yeah, you know what, I'm using this. Allong with that Hagin thing. Some sexy shit.</p>

    <script type="text/javascript">
    window.onresize = function() {
        var width = window.innerWidth;
        var h1 = document.getElementById("Hagin");
        var h2 = document.getElementById("Hagin2");

        if (width < 1000) {
            h1.fontFamily = "Sans";
        }
    };
    </script>
</body>
</html>

Right now, I'm just trying to get the font to change to Sans when the window gets below 1000px in width. It's not working... nothing happens. No errors reported in the console. Any ideas?

Upvotes: 0

Views: 383

Answers (3)

Paul Roub
Paul Roub

Reputation: 36448

This is what CSS media queries are for. Add this at the end of (or after) your existing CSS:

@media screen and (max-width: 999px) {
  #Hagin {
    font-family: Sans; 
  }
}

or, if you want it applied to all h1 tags:

@media screen and (max-width: 999px) {
  h1 {
    font-family: Sans; 
  }
}

Upvotes: 0

obey
obey

Reputation: 806

You need to create css cases using media queries. Look it up - link

Upvotes: 0

Amit Joki
Amit Joki

Reputation: 59262

You need to use style object which has that property. What you're currently doing is attaching a property named fontFamily to h1

if (width < 1000) {
    h1.style.fontFamily = "Sans";
}

Upvotes: 1

Related Questions