Different size gaps between images on mobile

[magurraa]

I have a page which has a Masonry Grid with floating images. On desktop it works well, but on mobile there are different size gaps between the images.

Is it possible to have evenly spaced images on mobile?

Website is http://magurran.com

Images here: https://www.dropbox.com/sh/zk24m5416e5umum/AACvgJL5EbcpKNmcOzCLBI7Ba?dl=0

[SeaTheme]

Hi there,
Welcome to SeaTheme forum.

Please enter BM content builder edit Masonry Grid module, enable ‘keep original layout on mobile”

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[magurraa]

Thank you. I have tried enabling that option, but it gives me the same layout on mobile as on the desktop site.

What I am trying to achieve is a mobile layout where all the images in a gallery are the same width and equally spaced, but only for mobile.

[SeaTheme]

Hi,

What I am trying to achieve is a mobile layout where all the images in a gallery are the same width and equally spaced, but only for mobile.

Sorry, I misunderstood your question. The “keep original layout on mobile” option should be off. And the images stays with one column(like your screenshot) on the mobile.

The spacing can be defined by this option: https://www.dropbox.com/s/k3dlynakw4wskbb/QQ20220612-214355.jpg?dl=0

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[magurraa]

Thanks for such a quick response.

I adjusted the spacing within that option, but all it does is increas the gaps between the images.

The photos are still different sizes, with different sized spaces between them. It seems to take the size and spacing from the fluid layout on the dekstop version.

I am trying to make them all equal width and equal spaces between them. Maybe it’s not possible?

Desktop version:

[magurraa]

Images all equal sizes and spaced equally and centered on the page:

[SeaTheme]

Hi,

It should be caused by “Fit Image into Container” on Masonry Grid module, it will be fixed if the option is disabled.

But the images will be cropped on desktop layout, you can add the custom CSS(“Appearance > Customize: Additional CSS”) codes instead disable the “Fit Image into Container” if you do not want the images are cropped

@media (max-width: 767.98px){
  .image-fit-grid .grid-item-img {
    object-fit: fill;
  }
}

---

Regards!
SeaTheme – FAQs – WordPress Customization – Facebook

[Author]

Posts