add media query to gallery shortcode

  • Can anyone help me to add media queries to the gallery shortcode function? I’ve read elsewhere that simply adding the CSS to my stylesheet doesn’t work. WP gallery uses it’s own CSS in the shortcode function. So I copied the entire function to my functions.php in my child theme and did the remove shortcode/add shortcode.

    The section in the shortcode for the CSS is this (I believe):

    if ( apply_filters( 'use_default_gallery_style', ! $html5 ) ) {
    $gallery_style = "
    <style type='text/css'>
      #{$selector} {
        margin: auto;
      }
      #{$selector} .gallery-item {
        float: {$float};
        margin-top: 10px;
        text-align: left;
        width: {$itemwidth}%;
      }
      #{$selector} img {
        border: none;
      }
      #{$selector} .gallery-caption {
        margin-left: 0;
      }

    How do I use “#{selector}” with @media?

    Thanks for any and all help!

Viewing 1 replies (of 1 total)
  • Thread Starter TaniaDow

    (@taniadow)

    Edit: Just wanted to add that I’ve tried adding the following to my stylesheet:

    /* For displaying 3 columns on tablet */
@media only screen and (max-width: 800px) {
 .gallery-columns-5 .gallery-item {
     width: 33%;
 }
}

/* For displaying single column on mobile */
@media only screen and (max-width: 480px) {
 .gallery-columns-5 .gallery-item {
     width: 100%;
 }
}

.gallery-columns-5 .gallery-item:nth-child(5n+1) {
     clear: none;
}

    It had no effect whatsoever.

Viewing 1 replies (of 1 total)
  • The topic ‘add media query to gallery shortcode’ is closed to new replies.