Change Grid Masonry Mobile View to show 1 image per row (stacking)

Site URL: https://www.framesbysaurabh.com/

Hi!

It seems Squarespace has changed the mobile view for 7.1 Grid Masonry to show 2 images per row instead of 1 image per row on mobile view. Is there a way to show only 1 image per row using CSS?

Website: www.framesbysaurabh.com

Thanks in advance!!

@Frames_by_Saurabh This code will give you a single column on tablet and down.

Result:

@media(max-width:767px) {
.gallery-masonry-item {
    width: 100% !important;
    transform: unset !important;
    position: unset !important;
}

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

}

Thanks for the prompt reply, Ryan.

It didn't seem to work unfortunately. There was a margin issue which I could fix by adding

margin-bottom: 20px !important;

to the code.

But the bigger issue is my bottom section of the page, which has the "Go to Top" and the Footer, get moved up (screenshot added). I believe this has something to do with the height value somewhere.

Can anyone assist here? 

Thanks! 

@Frames_by_Saurabh

/* Add this code to Design -> Custom CSS */

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

This should fix it 

Thanks, Ryan! 

That worked although it added a weird jankyness to the scrolling. Images jump up/down sometimes. Happens on both Iphones and Android phones. 

Any ideas? 

@Frames_by_Saurabh

It looks like Squarespace does some lazy loading on the images that aren't visible yet, so as you scroll and as these images are loaded the layout of the page is "repainted". Repainting can cause a bit of performance lag especially when a lot of elements are being repainted. 

You could experiment with removing the code altogether and see if you run into the same issue. 

Thanks for all your help, Ryan. I really appreciate it.

I removed the code and it works fine but looks terrible on mobile screens due to 2 pics/row. So i guess i have to choose between the mobile view looking correctly or the page working smoothly!

If any Squarespace admin/engineers are looking at the forums, please do realize we pay for your site which promises better/easier features without any compromises! This is all very frustrating.

On 6/18/2020 at 1:13 PM, Frames_by_Saurabh said:

Site URL: https://www.framesbysaurabh.com/

Hi!

It seems Squarespace has changed the mobile view for 7.1 Grid Masonry to show 2 images per row instead of 1 image per row on mobile view. Is there a way to show only 1 image per row using CSS?

Website: www.framesbysaurabh.com

Thanks in advance!!

How do you like 7.1? I am using 7.0 and may actually want to update so i can try out the new masonry on mobile. do you care the images get resized so much?

I tried the custom code provided here and it indeed created just one row. I added the additional code that @RyanDejaegher provided. For me, it didn't create the space in between the posts, and more importantly, whenever there was a picture in landscape mode, it was just filling up half of the page instead of using the full width. Any tips?

19 hours ago, NorthernAurora said:

I tried the custom code provided here and it indeed created just one row. I added the additional code that @RyanDejaegher provided. For me, it didn't create the space in between the posts, and more importantly, whenever there was a picture in landscape mode, it was just filling up half of the page instead of using the full width. Any tips?

Can you share site url? We can help easier

Hi, I also tried the custom code provided here but it moves my footer appear in the middle of the scroll. Also is there a way to add a padding between the photos, now they are glued together, I want some space in between. Thanks in advance if anyone can help?

On 1/25/2021 at 2:34 AM, PiaMD said:

Hi, I also tried the custom code provided here but it moves my footer appear in the middle of the scroll. Also is there a way to add a padding between the photos, now they are glued together, I want some space in between. Thanks in advance if anyone can help?

Can you share site url? We can help easier

looks like this is the code that will work

@media(max-width:767px) {
.gallery-masonry-item {
    width: 100% !important;
    transform: unset !important;
    position: unset !important;
      margin-bottom: 20px !important;
}

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

Hi there, 

I would like to have one picture per row on mobile view and 2 on desktop mode on my website www.elketeurlinckx.squarespace.com, it appears to show on mobile view in the edit modus that there is just 1 picture per row (which i want) but on my mobile (iphone 14) it doesn't show up and it's just half of the space.

Can anyone help me?

I used this code:

@media(max-width:767px) {
.gallery-masonry-item {
    width: 100% !important;
    transform: unset !important;
    position: unset !important;
      margin-bottom: 20px !important;
}

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

On 11/24/2023 at 3:40 PM, ElkeTeurlinckx said:

Hi there, 

I would like to have one picture per row on mobile view and 2 on desktop mode on my website www.elketeurlinckx.squarespace.com, it appears to show on mobile view in the edit modus that there is just 1 picture per row (which i want) but on my mobile (iphone 14) it doesn't show up and it's just half of the space.

Can anyone help me?

 

I used this code:

@media(max-width:767px) {
.gallery-masonry-item {
    width: 100% !important;
    transform: unset !important;
    position: unset !important;
      margin-bottom: 20px !important;
}

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

 

 

You need to set image with to 100%

@media(max-width:767px) {
.gallery-masonry-item {
    width: 100% !important;
    transform: unset !important;
    position: unset !important;
      margin-bottom: 20px !important;
}

.gallery-masonry-item-wrapper {
    height: unset !important;
}
  .gallery-masonry-wrapper {
    height: unset !important;
}
.gallery-masonry .gallery-masonry-item img {
width: 100% !important;
}
}