Wrap description text under thumbnails

  • Resolved Tig2021

    (@tig1960)


    7 years, 10 months ago

    Try as I might I cannot get the text descriptions under each image to wrap.

    https://reliablepropertysolutions.co.uk/test/photo-gallery/glazing/

    I also can’t seem to make the background to the images any colour other than white. Not sure if this is some kind of weird caching thing, but I’ve tried in all sorts of different browsers/devices, and it’s still white.

    This is the css code I’m using for the images.

    ======
    .ngg-gallery-thumbnail img {opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: opacity .5s linear;
    }

    .ngg-gallery-thumbnail img:hover {opacity: 0.4;
    filter: alpha(opacity=40);
    -webkit-transition: opacity .5s linear;
    }

    .ngg-gallery-thumbnail-box {
    background-color: #333333;
    color: #999999;
    }

    .fancybox-title-inside {
    color:#333333;
    font-style:italic;
    }

    .ngg-gallery-thumbnail span {
    color: #999999;
    }

    .ngg-template-caption .ngg-gallery-thumbnail {
    color: #999999;
    }

    /** Center Basic Thumbnails */
    .ngg-galleryoverview {
    text-align: center !important;
    }
    .ngg-gallery-thumbnail-box {
    float: none !important;
    display: inline-block !important;
    }
    ======

    Any help please?

    Thank you.

    • This topic was modified 7 years, 10 months ago by Tig2021.
    • This topic was modified 7 years, 10 months ago by Tig2021.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Imagely

    (@imagely)

    @tig1960 – To “force” the text to “wrap” you will have to set a specific width for the element in question … something along the following lines (from your example) should help:

    .ngg-gallery-thumbnail span {
    color: #999999;
    width: 240px;
}

    Thanks!

    – Cais.

    Thread Starter Tig2021

    (@tig1960)

    Hello

    Thanks the wrapping solution works, although I had to change the width: 240px to 220px as it was too wide on a mobile device. I’m still not sure it will be okay on all devices?

    Also, is there any way to make the description areas all the same height, so they’d be the height of, say, 3 lines? I’m using height 80px, but not sure if that’s the best way as on a mobile device there’s too much room under each description.

    Plugin Contributor Imagely

    (@imagely)

    @tig1960 – Unfortunately the “Basic” display types are not all that “mobile” friendly, you might need to do a bit of trial and error and/or set various media query breakpoints to get the look you are wanting, especially for setting the height (although I suspect it will be another “hard-coded” property).

    Thanks!

    – Cais.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Wrap description text under thumbnails’ is closed to new replies.