Trying to load a responsive CSS media query using Custom Taxonmy

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>

    }
} );

Answer 1

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
  }
} );

Answer 2

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
    }
} );