Photo Gallery in Mobile View is Terrible

Site URL: https://www.themarylhurstschool.org/facultyandstaff

Hi,

I have set up our faculty & staff page at our school using the gallery blocks.  When it is on desktop it aligns great but in mobile view it is a terrible mess.  I have code for the titles, code for white on hover and a plugin for the bio to pop up on click.  Any help would be greatly appreciated.  My site is:  https://mayflower-lute-rfzt.squarespace.com/config/pages. and the password is siteaccess.

Thank you in advance for any advice or code you could offer.

Elizabeth

Hi @Elramey, it looks like the plugins aren't working correctly, the only way to fix the style is to fix the plugins, adding more code will probably only cause more problems. 

It looks like the width is not constrained on mobile, but on the popup the content in it is incorrectly constrained. Are you trying to adjust the grid for mobile, or is that happening because of the width issues?

Could you share more details of the plugins and the CSS that you've put into the website? 

Hey Ziggy!  

Thanks for the quick response.  I think there is an update available for the plugin.  The plugin I am using is Lightbox by SQSP  https://www.sqspthemes.com/plugins/ultimate-squarespace-lightbox-plugin

This is the code used on that page:

<!-- Custom Style for Gallery Titles -->
<style>.gallery-caption p {white-space:pre}
.gallery-caption p {text-align:center}
.gallery-caption p:first-line {font-size: .75rem; font-weight:bold }</style>

<!-- Custom Style for Hover Effect in Gallery Photos -->
<style>.gallery-grid-item img:hover{opacity:.2}</style>

<!-- Plugin Lightbox - Custom Styles -->
<!-- Plugin Lightbox - Custom Styles -->
<style>
html .c-lightbox[data-type=inline]:not([data-group]) .c-lightbox__overlay {
  background: rgba(166,166,166,.78);
}

@media (min-width: 1200px) {
  html .c-lightbox__content {
    max-width: 1200px;
  }
}

html .c-lightbox__content-inner {
  padding: 12px;
  background: #fff;
  border-radius: 11px;
}
</style>
<!-- end Plugin Lightbox - Custom Styles -->

I will load the plugin update and see if it helps with the grid lining up correctly.  I haven't tried to adjust the grid for mobile yet.  I was wondering if the code for my titles is what is throwing the grids off.

Thank you!

e

You try disable plugin & check it again.