How do I make Wordpress read my media queries in CSS? - html

Question

I'm trying to show and hide some options on my navbar depending on the size of the screen. I've written my code in VisualStudio Code and it works fine, but when I put the custom CSS in the Customizing section of my theme (using Intentionally Blank) under the Additional CSS option, it doesn't.
I've tried a lot of solutions presented at similar questions on this site, but none of them are working.
The rest of my CSS code is working, so it shouldn't be a problem with finding the CSS file.
This is my code:
I'm removing tabs when the screen gets smaller and moving them into a dropdown menu called "more"
.custom {
font:'Arial';
}
.logo {
height: 100px;
width: auto;
margin: 7px;
}
.nav-link {
color: black;
}
/*Custom breakpoints navbar*/
/*Display none for the items in the navbar*/
#media only screen and (max-width: 940px) {
.nav-info {
display: none;
}
}
#media only screen and (max-width: 910px) {
.nav-recipes {
display: none;
}
}
#media only screen and (max-width: 815px) {
.nav-market {
display: none;
}
}
#media only screen and (max-width: 730px) {
.nav-gaming {
display: none;
}
}
/*Display of the "more" dropdown menu*/
#media only screen and (min-width: 940px) {
.nav-more {
display: none;
}
}
/*Display of content in the "more" dropdown menu*/
#media only screen and (min-width: 910px) {
.dd-recipes {
display: none;
}
}
#media only screen and (min-width: 815px) {
.dd-market {
display: none;
}
}
#media only screen and (min-width: 730px) {
.dd-gaming {
display: none;
}
}
/*Mobile display*/
#media only screen and (max-width: 730px) {
.col-title {
display: none;
}
}
#media only screen and (max-width: 730px) {
.logo {
height: 60px !important;
margin: 3px !important;
}
}
But again, I don't think there's anything wrong with the code, because it works just fine when I run it locally.
Does anyone know what to do in this situation? Could the problem be caused by with the theme I'm using?
Edit: Something else I've tried, but without succes, is putting the code that takes care of the responsiveness of the site in a different css file. How can I make the HTML code find the css file?
Edit 2: We got it to work by putting it inside the HTML file and removing the comments. We suspect that the problem was caused by the fact that the CSS code couldn't read the viewport. When we added it to the HTML file, that did mention the viewport in the meta tag in the head, it worked.

Answer 1

use WP wp_head action hook. using this hook you can simply add CSS in the header. check the below code. code goes in your active theme fucntions.php file.
function add_custom_css(){
?>
<style type="text/css">
.custom {
font:'Arial';
}
.logo {
height: 100px;
width: auto;
margin: 7px;
}
.nav-link {
color: black;
}
/*Custom breakpoints navbar*/
/*Display none for the items in the navbar*/
#media only screen and (max-width: 940px) {
.nav-info {
display: none;
}
}
#media only screen and (max-width: 910px) {
.nav-recipes {
display: none;
}
}
#media only screen and (max-width: 815px) {
.nav-market {
display: none;
}
}
#media only screen and (max-width: 730px) {
.nav-gaming {
display: none;
}
}
/*Display of the "more" dropdown menu*/
#media only screen and (min-width: 940px) {
.nav-more {
display: none;
}
}
/*Display of content in the "more" dropdown menu*/
#media only screen and (min-width: 910px) {
.dd-recipes {
display: none;
}
}
#media only screen and (min-width: 815px) {
.dd-market {
display: none;
}
}
#media only screen and (min-width: 730px) {
.dd-gaming {
display: none;
}
}
/*Mobile display*/
#media only screen and (max-width: 730px) {
.col-title {
display: none;
}
}
#media only screen and (max-width: 730px) {
.logo {
height: 60px !important;
margin: 3px !important;
}
}
</style>
<?php
}
add_action( 'wp_head', 'add_custom_css', 10, 1 );