Thumbs Responsive – Changing Size of thumbs to page width

  • d.jordan

    (@djordan-1)


    8 years, 6 months ago

    Hi everyone,
    I installed NextGen Gallery and it’s exactly what I was looking for.
    I’m currently customizing the Thumbnail Gallery Overview.

    I want the size of the thumbs change accordingly to the width of my page so my page always have the same number of thumbs in a row and fill full width in the container they are in.

    Like always 3 thumbs in a row and uses the complete width of the container, like a responsive fullscreen gallery overvierw.

    This should be easy in css I think but im a bit struggling right now 😛
    Anyone done this or got some tips how to achive that look?

    https://wordpress.org/plugins/nextgen-gallery/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor photocrati

    (@photocrati)

    8 years, 6 months ago

    @d.jordan – This is actually on our list of items to review as well … please feel free to share your thoughts and ideas on more responsive thumbnails as a Feature Request here: http://nextgen-gallery.com/feature-voting/

    Thanks!

    – Cais.

    Thread Starter d.jordan

    (@djordan-1)

    8 years, 6 months ago

    @photocrati – That’s great to hear!
    In theory it should be easy as this:

    .ngg-gallery-overlay {
    width: 100% !important;
    display:block;
    float:left;
}
.ngg-gallery-thumbnail-box {
    max-width: 33% !important;
    height: auto;
}
.ngg-gallery-thumbnail {
    max-width: 100% !important;
    height: auto !important;
}
.ngg-gallery-thumbnail img {
    border: none;
    padding: 0;
    width: 100%;
    height: auto !important;
}

    But it won’t change the image size, only if the width of the browser window is really small, like mobile view. At some width the code changes nothing and the images stay at their thumbnail sizes.
    Could that be because of the responsiveness of the gallery?
    Something is messing with this css, but I can’t find out what it is, any hints?

    Thanks!

    – Dan

    Plugin Contributor photocrati

    (@photocrati)

    8 years, 6 months ago

    @d.jordan – I would suspect you may need to look at CSS media queries to accomplish the best results …

    – Cais.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Thumbs Responsive – Changing Size of thumbs to page width’ is closed to new replies.