Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

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


Frames_by_Saurabh

Question

  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

@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; tr

@Frames_by_Saurabh /* Add this code to Design -> Custom CSS */ .gallery-masonry-wrapper { height: unset !important; } This should fix it 

Posted Images

13 answers to this question

Recommended Posts

  • 0

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

 

Result:

image.thumb.png.635c9de9f40649025b4fd47f1b581f58.png

 

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

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

}

 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to post
  • 0

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.

Issue2.jpg

Link to post
  • 0

@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. 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to post
  • 0

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.

Link to post
  • 0
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?

Link to post
  • 0

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?

Link to post
  • 0
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

Link to post
  • 0

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?

Link to post
  • 0
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

Link to post
  • 0

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

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...