Gallery layout on mobile?

  • Hello!

    The plugin works great, but it seems like it doesn’t support 2-3 columns on mobile sizes.

    Am I missing something, or does someone have a good solution for it? Right now they keep stacking above each other instead of floating to the side of each other, which causes a lot of scrolling for the user.

    Thanks for this awesome plugin!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Fredrik Westerlund

    (@florrpan)

    I need to follow up on this directly because I found the cultprit.

    It should work on mobile, it seems like the CSS and the breakpoints in Instagram Gallery are colliding with each other.

    The plugin adds an inline-styling to the .ig-image class, but it’s overridden by the breakpoints showed bellow. Deactivating the widths of the breakpoints solves the problem.

    element.style { /*inline styling added, this should be active, but isn't*/
    width: 33.333333333333%;
}

@media screen and (max-width: 420px) /* This one is applied on small screens */
.ig-item {
    min-width: 100%;
    padding: 5px;
}
@media screen and (max-width: 767px) /* this one applies to medium-ish screens*/
.ig-item {
    min-width: 50%;
    padding: 5px;
}

    I know how to fix this myself, but thought this might be an issue the plugin creator want to take a look at.

    Hello Fredrik,

    thanks for reporting this. in the next update there will be 2-3 columns in Gallery on mobile sizes.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Gallery layout on mobile?’ is closed to new replies.