SourceProjects

Thank you so much Ziggy, that worked! : ) Just a pity we can't seem to have. a masonry gallery mobile view that works the same way as in a grid gallery in mobile so images show in the order they're supposed to... But this one-column solution is brilliant for now! 🙏

Hello, I've noticed recently that Squarespace changes the order of the masonry gallery sections in mobile view - well the order isn't changed but the gallery is collapsed into two columns which makes it appear that the order has changed and the images that are supposed to sit next to each other no longer do. Please see example from my client's website here. I saw another thread on forcing masonry galleries to display as one column on mobile view but these CSS solutions are not working for me on this site... If anyone has any other ideas, would be very grateful!

Hi Tuanphan, again I must apologise for my later reply. I was away last week and I didn't receive a notification - I have just seen your post and tried the code and it worked! Than you so much! You're the best! 🌟🙏

@tuanphan Thank you so much for this! 🙌 It worked perfectly! 🙏 Now I just have to apply this to all the galleries... Many thanks for your help!

Hi Tuanphan, sorry for the late reply. I am not getting notifications when people reply to topics... Yet I got a notification about a thread I had no part in earlier. Very strange! 🤷‍♀️ Here is an example of a page. If you scroll down to the "Moving Image" section you will see what I mean. It's so random... Some of the videos are under the sidebar menu and some above... Would be grateful if you can shed any light on why this is happening or how to fix this! Ideally would like all videos to sit under sidebar menu.

Hi Tuanphan, I'm sorry I didn't get a notification that you replied to my question! It wasn't for that section though. It was only for the grid galleries in the artist portfolio pages. Here's an example page. In the desktop version, I have 6 columns which splits automatically into 2 columns in mobile. But my clients would rather this is split into 3 columns in mobile and I can't seem to work this out. Would be very grateful for your help!

Does anyone know how to ensure that video blocks will remain behind other layers? I have created a slightly transparent sidebar menu on a site and it it floats above most of the content but with video blocks, it is very random - some videos sit under it and some above. Does anyone know how to make sure that the menu floats above all the video blocks? (example here) I've tried targeting video blocks with z-index code but it's not working...

Hello, I am trying to make the galleries on my client's website (link) display in 3 columns rather than the default 2 in mobile. I have tried various CSS fixes but they are not working. Perhaps because of fluid engine? And maybe because I am already targeting each grid gallery with the following code to eliminate mysterious mobile padding? @media screen and (max-width:1025px) { .fe-63ef599164b9221a9814c895 { grid-template-rows: repeat(6,minmax(calc(~"var(--container-width) * var(--row-height-scaling-factor)"), auto)) !important; } } the .fe section targets the grid that the gallery is laid out on... I presume I have to add something to the code above to adjust the columns in mobile view but I am not sure what that is... Solutions such as the one below have no effect. Even when I tried it on a test gallery that was not altered with the code above... @media only screen and (max-width: 640px) { .gallery-grid-wrapper { grid-template-columns: 3fr !important; grid-gap: 20px !important; } } Would be very grateful for any ideas!

I was in touch with customer support this morning and they were very responsive and helpful as usual but they claimed that it was probably the CSS / coding block causing the issue and that that they're not there to troubleshoot CSS issues. Anyway, I know that was not causing the extra padding in galleries in mobile view as I am not the first person who has posted about this... I think it is a FE teething problem. Thankfully, I have now found a solution in the thread here: This code specifically... It will take a lot of time to fix the site but so happy to have found a fix!

Thanks Paul, yes I think I'll have to contact customer support about this... Will keep you posted!

Thanks very much Paul, Every single page was carefully edited in the mobile editor to eliminate blank space at the bottom of galleries and page sections (as per your video). Why blank space is suddenly appearing in a real life mobile screen is a complete mystery and this is what I am trying to eliminate... The autoplay script is there because Squarespace sadly no longer provide this option in carousel galleries. There is one of these on the website in the about page. If you know of a better fix for this, it would be most welcome. But the white space below the galleries in mobile view is of greater concern.

Hi Paul, Please see screenshots attached. The first is what I expected. The second is the view in my mobile (iPhone)

Hello! I finally (thought I had) finished a client's website yesterday and went live. Link is here. (If you look at any of the artist pages on your mobile you will see what I mean). The website consists of lots and lots and lots of galleries. In the mobile view, everything in the design editor looked fine. But now that it is live and I am looking at it on my actual mobile I am horrified to see that beneath every grid gallery there is a LOT of blank space... In the editor, I had left no blank space beneath the images (i.e. dragged the blue bar up) and only left one/none fluid engine rows beneath the galleries... I am hoping there is a sitewide fix for this. But if I have to target different section id's I will... Been looking up different solutions but nothing is working so far. Would be grateful for your help!

Hello, no I'm afraid I didn't find a solution for this... Hopefully the Squarespace team develop the asset library features in future. I am finding the folders for image organisation very useful in the meantime!

Hello! I have just had to do the same thing for a website and found the solution here: https://sirv.com/help/articles/hover-change-image/ A bit of a different approach to yours as you're putting the images into code containers rather than as a swappable block. The <style> code must go into the advanced section of your page's settings rather than the css injection section. And then you create a code block with the relevant image urls from your asset library (copy image address rather than the url for the image in your library) and the destination url you want to click to... Maybe you've found a solution by now but hope this helps, if not you, someone else in future!