'Issues with CSS Variables acting pointless

So I've been messing with CSS Variables, and found a way to change my website from using three different CSS pages (Desktop/Tablet/Phone) into one. And it works! The page is much faster when switching sizes AND doesn't sometimes have a few issues that need a page refresh. It's a very efficient change :) . .. except for one feature; I have an ad service on my site (basic image/link, nothing more) that runs off a JavaScript file. When I run all the code without CSS variables in the ad section, it works as normal (As long as I only view the page on either Desktop, tablet, or phone; whatever manual settings I plug in). However, when I add in the variables it seems to ignore those and does. .. whatever :( It SHOULD make the banner ads be of equal width (48vw Desktop/Tablet, 98vw Phone) and next to each other (Desktop/tablet, stacked on Phone). I isolated the entire problem into a single HTML document with the absolute basics for ease of view (but the CSS and JS for my main site are separate from the HTML). the 468A and 468B is because they used to need to be separate for reasons I later removed, I just never made them into one thing (In case I decide to separate them again).

<!DOCTYPE html>
<html>
    <style>
        * {
            margin:0;
            padding:0;
        }
        @media screen and (min-width:1000px) and (orientation:landscape) /*DESKTOP*/ {
            :root {
                --AD_468A_WITDH:48vw;
                --AD_468B_WITDH:var(--AD_468A_WIDTH);
                --AD_468A_HEIGHT:5vh;
                --AD_468B_HEIGHT:var(--AD_468A_HEIGHT);
                --AD_468A_IMG_WIDTH:98%;
                --AD_468B_IMG_WIDTH:var(--AD_468A_IMG_WIDTH);
                --AD_468A_IMG_HEIGHT:60px;
                --AD_468B_IMG_HEIGHT:var(--AD_468A_IMG_HEIGHT);
            }
        }
        @media screen and (max-width:999px) and (orientation:landscape) /*TABLET*/ {
            :root {
                --AD_468A_WITDH:48vw;
                --AD_468B_WITDH:var(--AD_468A_WIDTH);
                --AD_468A_HEIGHT:5vh;
                --AD_468B_HEIGHT:var(--AD_468A_HEIGHT);
                --AD_468A_IMG_WIDTH:100%;
                --AD_468B_IMG_WIDTH:var(--AD_468A_IMG_WIDTH);
                --AD_468A_IMG_HEIGHT:60px;
                --AD_468B_IMG_HEIGHT:var(--AD_468A_IMG_HEIGHT);
            }
        }
        @media screen and (min-width:1px) and (orientation:portrait) /*PHONE*/ {
            :root {
                --AD_468A_WITDH:98vw;
                --AD_468B_WITDH:var(--AD_468A_WIDTH);
                --AD_468A_HEIGHT:7vh;
                --AD_468B_HEIGHT:var(--AD_468A_HEIGHT);
                --AD_468A_IMG_WIDTH:98%;
                --AD_468B_IMG_WIDTH:var(--AD_468A_IMG_WIDTH);
                --AD_468A_IMG_HEIGHT:60px;
                --AD_468B_IMG_HEIGHT:var(--AD_468A_IMG_HEIGHT);
            }
        }
        #ad468A, #ad468B {
            margin:1vh 0.5vw;
            width:var(--AD_468A_WIDTH);
            height:var(--AD_468A_HEIGHT);
            float:right;
        }
        #ad468A img, #ad468B img {
            height:var(--AD_468A_IMG_HEIGHT);
            width:var(--AD_468A_IMG_WIDTH);
        }
    </style>
    <body>
        <div id="ad468A">
            <script>
                var AD_IMG_LINK=[],
                link=0;
                AD_IMG_LINK[0]="<a href='https://www.mozilla.org/thunderbird'><img src='https://img.neververy4.com/banner/468-60/ffthunderbirdani.gif' alt='Thunderbird' /></a>";
                AD_IMG_LINK[1] = "<a href='https://www.mozilla.org/firefox'><img src='https://img.neververy4.com/banner/468-60/ffbtakebackani.gif' alt='Firefox' /></a>";
                BANNER=Math.floor(Math.random()*AD_IMG_LINK.length);
                document.write(AD_IMG_LINK[BANNER]);
            </script>
        </div>
        <div id="ad468B">
            <script>
                var AD_IMG_LINK=[],
                link=0;
                AD_IMG_LINK[0]="<a href='https://www.mozilla.org/thunderbird'><img src='https://img.neververy4.com/banner/468-60/ffthunderbirdani.gif' alt='Thunderbird' /></a>";
                AD_IMG_LINK[1] = "<a href='https://www.mozilla.org/firefox'><img src='https://img.neververy4.com/banner/468-60/ffbtakebackani.gif' alt='Firefox' /></a>";
                BANNER=Math.floor(Math.random()*AD_IMG_LINK.length);
                document.write(AD_IMG_LINK[BANNER]);
            </script>
        </div>
        <div style="clear:both;"></div>
    </body>
</html>

All the web language I know has been self-taught; pretty much I google "How do I do X" and go from there. So maybe there's something very important I'm missing that I don't know of? I am also very unfamiliar with JavaScript; 8 years ago I googled "How to add ads to a site" and used the first result that worked. So maybe there's a function I need to add to make it compatible? I've spent the past almost two weeks looking for solutions and experimenting with this, but to no avail.

javascripthtmlcssvariables


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions