Images on top of each other in small viewports

  • Hi there,

    I’m having an issue where images end up stacked on top of each other in small viewports.

    You can see the issue here if you resize the window to around 380 pixels or smaller.

    I haven’t been able to verify whether the problem occurs in other browsers than Chrome.

    The problem seems to be that the IMG tag of the lower photo gets assigned a large negative CSS top value. This means it gets pushed up underneath the previous image. This doesn’t happen when the viewport is wider.

    As a side note, I would rather that there is no tiling at all on small/mobile screens. I set disableGridSizeBelow to 800 hoping that it would do this but I’m not sure what effect it’s having.

    Many thanks,

    Simon

    • This topic was modified 6 years, 10 months ago by simooo.
    • This topic was modified 6 years, 10 months ago by Jan Dembowski. Reason: Removed redundant unnecessary link. Use the link field

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

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi Simon,

    I can’t see the behaviour you describe. Is there a specific reason why you’re calling the script manually?

    Thread Starter simooo

    (@simooo)

    Hi there,

    Thanks for the reply. This is a screenshot from Chrome on my phone (Galaxy S7):
    https://ibb.co/h8BRcG

    And here’s a screenshot from Chrome on my MacBook when resizing to a narrow viewport:
    https://ibb.co/n8DKWb

    As you can see in the inspector the bottom image slides up under the image above. When inspecting the IMG tag I can see that it has a TOP value of -217.634px. It also has a WIDTH value set. Both these values only get set when the viewport is under a certain width.

    With regards to calling the script manually – I need to automatically generate these galleries in the loop on category pages, rather than manually creating galleries inside the plugin’s interface. Do you think this is where something goes wrong?

    Hope that makes things clearer!

    Thanks,

    Simon

    Hi Simon,

    you’re right sorry, I thought you meant a different issue. The disableGridSizeBelow parameter is used to disabled the image cropping under a specific browser width.

    Can you try to pass just these values:

    jQuery('.final-tiles-gallery').finalTilesGallery({
      margin: 10,
      debug: true
});

    be aware the debug mode will produce show some debugging infos on top of the images, you can hide them via CSS but that way I’m able to see the debugging messages in console, thanks.

    Diego

    Thread Starter simooo

    (@simooo)

    Hi Diego!

    This is the dev version of the site, with the debug mode turned on as you requested:

    https://kevinspeight.balthazaurus.com/show/photography

    Please note that I’m also passing allowEnlargement: false and layout: 'final' since without these the result is different. Without allowEnlargement turned off I don’t get the problem of stacked images, but instead the second image (the portrait one) is blown up to a very large size.

    Hope that makes sense! Thanks again.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Images on top of each other in small viewports’ is closed to new replies.