Gallery has changed to 2 columns on mobile

Site URL: https://www.nickorr.art

Hi,

I wonder if anyone can help or has had a similar problem.

I use the gallery : masonry on my homepage and the images have ALWAYS displayed as a single column on mobile, as you would expect. See attached screenshot.

Now it displays as two columns, checked using various different phones and methods and you can't change it. Even  if you create a new gallery it displays as two columns which is absolutely useless to me as an artist.

I have tried to contact support but they said it had always been like that which for anyone that uses the gallery, the will know is total rubbish. You can even check the site on google cache and see it as one column. See link below

https://webcache.googleusercontent.com/search?q=cache%3AWww.nickorr.art

I have only recently moved my site from wordpress to Squarespace to get a more stable platform and better support, but the support team basically accused me of lying.

Please, please help...

Nick

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
  .homepage {
    .gallery-masonry-wrapper.gallery-masonry-list--ready figure {
        width: 100% !important;
        height: auto !important;
        position: static !important;
        transform: unset !important;
    }
    .gallery-masonry-wrapper.gallery-masonry-list--ready figure img {
        width: 100% !important;
    }
    .gallery-masonry-wrapper.gallery-masonry-list--ready figure>div {
        height: auto !important;
    }
  }
}

Thank you tuanphan, I will try it.

Do you have any idea why the template would suddenly change like that. I am worried that something else will suddenly change without me doing anything.

Thanks again,

Nick

Not sure. I remember 1 month ago, it was 1 columns on mobile ...

thank you so much  @tuanphan I just tried it but it didn't work :-(  Would love to get back to the the single column on mobile as well... Anything I did wrong below ? Thank you !

12 minutes ago, pneufeldt said:

thank you so much  @tuanphan I just tried it but it didn't work :-(  Would love to get back to the the single column on mobile as well... Anything I did wrong below ? Thank you !

above code for homepage, so it won't work on portfolio page. Can you share link to portfolio page on your site?

here you go : 

https://www.philipneufeldt.com/photography/project-two-3lnj8

Thank you !!!

27 minutes ago, pneufeldt said:

here you go : 

https://www.philipneufeldt.com/photography/project-two-3lnj8

Thank you !!!

@media screen and (max-width:767px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready figure {
        width: 100% !important;
        height: auto !important;
        position: static !important;
        transform: unset !important;
    }
    .gallery-masonry-wrapper.gallery-masonry-list--ready figure img {
        width: 100% !important;
    }
    .gallery-masonry-wrapper.gallery-masonry-list--ready figure>div {
        height: auto !important;
    }
}

I have just had a reply from a team leader at Sqaurespace about my issue with the gallery, which I have copied below.

I find it unbelievable that they can make such a fundamental change without either asking, or informing, its thousands of users, and all because someone asked for it in a forum.

I moved away from wordpress because I wanted a more stable platform, where I didn't have to worry about updates changing things any more. I spent a lot of time testing my site to ensure it worked perfectly before the changeover, and yet less than two months later, I am in a worse position than when I started. 

I will now have no other option but to find an alternative to squarespace, as I can't be sure they won't change another fundamental component of my site without my consent or at the very least informing me beforehand. Yes, I tried the CSS and it split an image with a text block, so it basically didn't work.  Even if it had, who is to say they won't change something else that I can't fix with CSS.

Can anyone suggest another provider, similar to squarespace but lets you decide what your site will look like.

Nick

Hi Nick,

My name is NJ and your ticket has been escalated to me for further review.  I understand you have reached out via Twitter as well, and I appreciate your patience as I worked to get to your case.

I see that the mobile display of your homepage has changed recently from a single column, to multiple columns.  Thank you for sending along the screenshot and cached link to your site.  When I pull it up on my iPhone XR, I'm seeing the same behavior - the single column on the cached site from June 7, but the 2 columns as confirmed yesterday on June 9.

I can certainly appreciate your position when the site changes in a way you didn't anticipate or hope for. We strive to keep these types of adjustments as infrequent and calculated as possible when/if they will impact active sites.  Like any technology, future updates are a reality, but you shouldn't expect visual changes of this nature at a high frequency.   

From my research, it appears that this update was intended to provide a more consistent appearance between the mobile and desktop versions of sites. In fact, the article linked below is from our forum, where a user asked about creating this behavior with CSS:

https://forum.squarespace.com/topic/160814-71-masonry-grid-maintain-2-columns-in-mobile/

In order to adjust your site's mobile appearance, back to a single-column, you'll need to use CSS.  Although we do not provide or troubleshoot this type of advanced customization, you may be able to adjust the CSS linked above, to create a single column on mobile devices.  For additional assistance, I recommend exploring our guide on adding CSS:

Using the CSS Editor

Again, I cannot provide or troubleshoot this CSS, so if you'd like more specific assistance, I recommend replying to the article.

Lastly, I want to acknowledge your request to revert this change for your individual site.  We do not offer this type of personalized adjustment and control on a per-site basis.  I have passed along your feedback and preference for a single-column on mobile, but I cannot guarantee that this will be available on the Masonry gallery section again, without using custom CSS.  

If you have any questions or concerns, I'll be keeping an eye out for your response.  As a Team Lead, I'm not as readily available to respond, but I will do my best to get back to you on weekdays.

Regards,
 

@nickorr totally agree ! I think we are all shocked that without any communication, the entire look & feel of our websites has been altered just like that. Very unprofessional. If this doesn't change I'll be looking for a new provider as well. 

Thank you so much @tuanphan !! It worked 😀

just one last thing is there a way to add some space between the images as right now there is no separation ?

thank you ! 

3 minutes ago, pneufeldt said:

@nickorr totally agree ! I think we are all shocked that without any communication, the entire look & feel of our websites has been altered just like that. Very unprofessional. If this doesn't change I'll be looking for a new provider as well. 

 

Why on earth they would think that displaying two columns on a mobile is better than one, especially when the platform is aimed at creatives, is beyond me.

The fact you can't pinch to zoom in lightbox just makes a bad situation worse. Look at the difference between the two versions of my site on mobile.

I have tweeted about this and tagged some of the top team including the CEO, maybe if it gets enough retweets they may change their decision.

Twitter name @Featherpictures

41 minutes ago, pneufeldt said:

Thank you so much @tuanphan !! It worked 😀

just one last thing is there a way to add some space between the images as right now there is no separation ?

thank you ! 

 

try adding margin bottom, like this

@media screen and (max-width:767px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready figure {
        width: 100% !important;
        height: auto !important;
        position: static !important;
        transform: unset !important;
		margin-bottom: 20px !important;
    }
    .gallery-masonry-wrapper.gallery-masonry-list--ready figure img {
        width: 100% !important;
    }
    .gallery-masonry-wrapper.gallery-masonry-list--ready figure>div {
        height: auto !important;
    }
}

I'm so glad you posted about this! One day I just looked at my site and all of a sudden all my masonry galleries were 2 columns on mobile. I'm a photographer so this makes all my photos a lot smaller and less prominent, so I am definitely not a fan. I wrote to customer support as well and they said I will have to use custom code to get it back. I hope they fix this because I came to Squarespace because of how good it looks on mobile and this is a game changer. I will try what @tuanphan has suggested, I hope this all gets figured out!

Glad I wasn't imagining the grid view changes on mobile view! Not sure what the guys at Squarespace were thinking when changing that.

@tuanphan I tried your solution posted above but unfortunately it didn't work for me. Would you mind assisting me? My website is www.framesbysaurabh.com

Thanks!!

16 hours ago, Frames_by_Saurabh said:

Glad I wasn't imagining the grid view changes on mobile view! Not sure what the guys at Squarespace were thinking when changing that.

@tuanphan I tried your solution posted above but unfortunately it didn't work for me. Would you mind assisting me? My website is www.framesbysaurabh.com

Thanks!!

 

I see it worked. It seems you solved?

So it looks fine for the images up top but if you scroll down you will see that the bottom elements of the website like the "Go to Top" section and the Footer section get moved up and are displayed in the middle of the gallery. It has to do something with the height values.

The same issue occurs on @pneufeldt 's website too, he had the same issue above (his website).

Thanks for your time!

@Frames_by_Saurabh I just took a look at your mobile site and it looks like you were able to fix this, your galleries look great! Would you mind sharing how you were able to work around the error mentioned above? I'm still having the same issue where the code @tuanphan kindly provided misplaces my bottom navigations and footer (I don't see them anywhere) and also gets rid of the margin on either side of the images making them a true "full bleed".

Thank you, any and all help is appreciated!

I was able to add the code below from another forum on this topic:

}.gallery-masonry-wrapper {
    height: unset !important;
}

–which did fix the footer and navigation but then caused an issue with "repainting" creating a lag and jumpiness when scrolling, which I saw @Frames_by_Saurabh was also experiencing with their site (see link to other forum below). Has anyone found a fix for this? Thanks again.

On 7/20/2020 at 11:20 PM, jordandaniellet said:

I was able to add the code below from another forum on this topic:

}.gallery-masonry-wrapper {
    height: unset !important;
}

–which did fix the footer and navigation but then caused an issue with "repainting" creating a lag and jumpiness when scrolling, which I saw @Frames_by_Saurabh was also experiencing with their site (see link to other forum below). Has anyone found a fix for this? Thanks again.

 

Have you solved it yet?

On 7/25/2020 at 6:10 PM, tuanphan said:

Have you solved it yet?

Hi @tuanphan! Thank you for following up. Unfortunately I have not yet solved this, as every fix seems to cause a new error. When I added the code above I was able to fix the column and footer issues, but still experienced the choppy/lag loading on mobile and then noticed this code update also displaced the footer navigations in the desktop version of my site, placing them higher and overlaid on top of the gallery images. Since it seemed to be doing more harm than good, I deleted the code and have left it alone for now.

It appears from viewing @Frames_by_Saurabh's site on mobile and desktop that they were able to fix the issues I'm having without any major visible glitches on desktop or mobile, but I haven't figured it out yet.

On 6/11/2020 at 11:54 AM, tuanphan said:

try adding margin bottom, like this

@media screen and (max-width:767px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready figure {
        width: 100% !important;
        height: auto !important;
        position: static !important;
        transform: unset !important;
		margin-bottom: 20px !important;
    }
    .gallery-masonry-wrapper.gallery-masonry-list--ready figure img {
        width: 100% !important;
    }
    .gallery-masonry-wrapper.gallery-masonry-list--ready figure>div {
        height: auto !important;
    }
}

 

On 7/20/2020 at 6:20 PM, jordandaniellet said:

I was able to add the code below from another forum on this topic:

}.gallery-masonry-wrapper {
    height: unset !important;
}

 

 

Thanks @tuanphan and @jordandaniellet for this post!

I managed to get the 1 column working using both of these :) 

Would it be possible to adjust the width as well? I reduced margin between the images to 5px and I would like it if left/right uses the same margin.   

I tried adjusting the width parameter(s) but I can't center the thing :)

If anyone wants to check: https://roadrunner-elephant-4rfm.squarespace.com/posters (pw elephant)

I can't seem to get this to work on my site. It keeps messing up the footer (see included image, footer is behind the images).

How would I fix it so it's single column, the footer and text below the footer are still present, and have a little bit of margin on the sides? Similar to this site. I would want this to be site wide also.

website: https://herring-flower-lwt9.squarespace.com

PW: 5h9a;4#8la

On 3/6/2021 at 1:21 AM, bpc said:

I can't seem to get this to work on my site. It keeps messing up the footer (see included image, footer is behind the images).

How would I fix it so it's single column, the footer and text below the footer are still present, and have a little bit of margin on the sides? Similar to this site. I would want this to be site wide also.

website: https://herring-flower-lwt9.squarespace.com

PW: 5h9a;4#8la

Hi. WHere is gallery page?

I actually got it figured out. Here is the CSS if anyone wants it:

/* THIS REDUCES THE MASONRY GRID TO ONE COLUMN ON MOBILE */
@media screen and (max-width:767px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready figure {
    width: 96% !important;
    height: auto !important;
    position: static !important;
    transform: unset !important;
    margin-bottom: 2% !important;
    margin-left: 2%;
      margin-right: 2%;
    text-align: center;
}
    .gallery-masonry-wrapper.gallery-masonry-list--ready figure img {
        width: 100% !important;
    }
    .gallery-masonry-wrapper.gallery-masonry-list--ready figure>div {
        height: auto !important;
    }
  .gallery-masonry-wrapper {
    height: unset !important;
}
}