Support » Themes and Templates » Making gallery thumbnail containers responsive…

  • Resolved Glassine


    Hi everyone,

    I have a gallery on my site, and I have managed to style the thumbnails so that they resize with the browser. The only issue I’m having is that the thumbnail container around which I have a border keeps the same height when everything else resizes. So, in other words the width responds correctly, but the height just stays the same. I have tried setting the gallery-icon height to auto, but this just breaks the grid entirely. The thumbs themselves respond properly but not the container. I must be missing something simple.

    I am using the Twenty Twelve theme, and here is what I have added to the child theme’s stylesheet:

    /* Gallery and thumbnail styling
    #primary .gallery-icon img {
    padding: 8px;
    float: none;
    position: absolute;
    max-width: 75%;
    height: auto;
    border: 0px;

    .gallery-icon a {
    text-align: center;
    float: none;
    display: inline-block;
    position: relative;
    max-width: 100%;
    height: 175px;
    border: 1px solid #ddd;
    border-radius: 5px;

    and here is the link:

    I appreciate your help.


  • The topic ‘Making gallery thumbnail containers responsive…’ is closed to new replies.