CSS-浏览器中不呈现媒体查询

Question

我正在WordPress网站上尝试将媒体查询样式应用于特定的ID：

HTML：

<div class="parallax-window" data-parallax="scroll" data-image-src="/wp-content/themes/TheBullshitCollection/Images/white-background.jpg">
    <div class="welcome-page-div">
    <h3 id="welcome-cursive">Welcome</h3>
    </div>

    <div class="welcome-page-div">
    <h3>To the Bullshit Collection</h3>
    </div>

    <section id="section5" class="demo">
    <a href="#menu-main"><span></span>Scroll</a>
    </section>
</div>

CSS：

/* MEDIA QUERIES */

/* SMART PHONE */

@media screen and (max-width: 320px) {
    #welcome-cursive {
        font-size: 270px!important;
    }

    .welcome-page-div h3 {
        font-size: 270px;
    }
}

如您所见，我正在尝试使ID为welcome-cursive的h3在320px及以下的宽度上获得270px的字体大小。 我已经看过这篇文章： CSS媒体查询不适用

我的样式表被列在functions.php文件中，并包含在标题中：

<link rel="stylesheet" href="http://thebullshitcollection.com/wp-content/themes/TheBullshitCollection/css/bullshit.css">

但是，媒体查询不会显示在检查器中。 这是我的网站： http : //thebullshitcollection.com/

它可以按预期在JSFiddle中工作：
https://jsfiddle.net/6gmzps4o/

我也尝试将其添加到媒体查询中：

.welcome-page-div h3 {
    font-size: 270px;
}

仍然没有结果：（

Answer 1

尝试添加头部分元视口：

<meta name="viewport" content="width=device-width, initial-scale=1">