Jump to content

Photo Gallery in Mobile View is Terrible

Recommended Posts

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


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.


Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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? 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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 -->
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;
<!-- 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!


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.