Trying to load a responsive CSS media query using Custom Taxonmy
-
22-04-2021 - |
Question
@media (max-width: 768px) {
.page-id-9334 .site-content {
display: flex;
flex-direction: column-reverse;
}
}
I am trying to load this CSS into Custom Taxonomy Pages...
My original question refers to a specific Page ID (and I edited my original question).
Anyways - based upon the replies below I thought that this would work but it throws an error, with or without the <style>
CSS Opening Tags.
Can anyone else please shed some light on how I might be able to get this to work?
Thanks!
add_action( 'wp_head', function () {
if ( is_tax(country) ) {
<style>
@media (max-width: 768px) {
.site-content {
display: flex;
flex-direction: column-reverse;
}
}
</style>
}
} );
La solution
Seems there are a few elements missing
First is the quotes in is_tax(country)
, should be is_tax('country')
Second you are missing closing and opening PHP tags
When working with action that require html output you can do it in a few ways. For now we will stick with the method you wanted to use.
The final result would look like this
add_action( 'wp_head', function () {
if ( is_tax('country') ) {
?>
<style>
@media (max-width: 768px) {
.site-content {
display: flex;
flex-direction: column-reverse;
}
}
</style>
<?php
}
} );
Autres conseils
You said (via the comments) that you added the code via wp_head
, so if you want the code be added only on the Page (post type page
) with the ID of 9334, you can use is_page()
which is one of the conditional tags in WordPress.
So for example:
add_action( 'wp_head', function () {
if ( is_page( 9334 ) ) {
// add your CSS here
}
} );