Support » Plugin: WP Featherlight - A Simple jQuery Lightbox » Change Columns for Mobile

  • Resolved Mike Oliver

    (@zephyrmike)


    Hello, wondering if there is a filter or way to have the gallery columns change for different devices? For example 4 columns for desktop, 1 column for mobile. Thanks.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Hi Mike,

    The column layout of galleries on mobile is bizarre, but it’s a function of WP itself, not this plugin.

    Try adding this CSS:

    .gallery .gallery-item,
    .gallery-columns-2 .gallery-item:nth-child(2n+1),
    .gallery-columns-3 .gallery-item:nth-child(3n+1),
    .gallery-columns-4 .gallery-item:nth-child(4n+1) {
         clear: none;
    }

    After your themes mobile breakpoint:

    .gallery-columns-2 .gallery-item,
    .gallery-columns-3 .gallery-item,
    .gallery-columns-4 .gallery-item {
        max-width: 100%;
    }

    After your themes tablet breakpoint:

    .gallery-columns-2 .gallery-item,
    .gallery-columns-3 .gallery-item,
    .gallery-columns-4 .gallery-item {
        max-width: 33%;
    }

    Reference – Responsive WordPress Gallery

    Thanks, I really appreciate that.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change Columns for Mobile’ is closed to new replies.