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

  • Resolved Glassine

    (@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;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin:auto;
    vertical-align:middle;
    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: http://brantmoorefield.com/paintings/

    I appreciate your help.

    Best,
    Brant

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