I’m working on a WordPress site and trying to apply media query styles to a specific 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;
    }
}

As you can see, I’m trying to make the h3 with the ID welcome-cursive get a font size of 270px at width 320px and below. I already looked at this article: CSS media query not applying

My stylesheet is enqueued in the functions.php file and is included in the header:

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

Yet the media query doesn’t show up in the inspector. Here’s my website: http://thebullshitcollection.com/

And it works in JSFiddle as expected:
https://jsfiddle.net/6gmzps4o/

Also I tried adding this to the media query:

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

Yet still no result : (

Read more here: CSS – Media Query Not Rendering in Browser


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: