Kinreu

@tuanphan Ohhh so glad i've found this. And would be possible on mobile to display text in black (because on desktop my overlay color is black and text white, so when i apply the code update the text is here but white on white) thanks a lot.

Hello, On this page : https://www.maisonhesper.com/foodportfolio I have a title on "hover" But it seams that this over is not display on the mobile version of the site. I tried to change the design on the mobile version for it yo be dispplayed below the image on mobile, but then when i change the design in the mobile it also changes it on the desktop. What can I do ? Thanks

thanks @tuanphan that i wanted the confirmation for that the code to display in all the situation was correct. Thanks afain for your help.

@tuanphan This is what I wanted, 3 column on desktop, 2 on ipad and 1 on mobile. is there a problem the code I sent ? should I remove some of it ? thanks again.

Ohhh so I had to copy both part of the code like this ? /* No underline Nav */ .header-nav-item--active a { background-image: none!important; } /* Masonry one item on mobile */ @media screen and (max-width:767px) { .gallery-masonry-item-wrapper { height: auto !important; margin-bottom: 10px !important; } figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; } .gallery-masonry-item-wrapper { height: auto !important; } .gallery-masonry .gallery-masonry-item[data-loaded] img { width: 100% !important; } .gallery-masonry { padding-left: 15 !important; padding-right: 15 !important; } .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; }} @media only screen and (max-width: 991px) and (min-width:768px) { body.homepage { .gallery-masonry .gallery-masonry-wrapper { columns: 2; column-gap: 0; height: auto!important; display: block!important; padding: 0px; } .gallery-masonry-item-wrapper { height: auto!important; } .gallery-masonry-item { position: relative!important; transform: none!important; width: 100%!important; display: block; padding: 1.5px!important; box-sizing: border-box; } .gallery-masonry .gallery-masonry-item img { height: 100%!important; width: 100%!important; } }} because it's seems to work on all device now. Thanksa gain for your feedback, let me know if I should remove something 🙂

Thanks a lot @tuanphan It actually makes the trick on ipad. where I have two columns now, but i'm loosing the one column on mobile. Not sure its possible to have everything at once : 3 columns on desktop, 2 on ipad and 1 on mobile. I don't get why Squarespace do not let styling menu be different from desktop and mobile on galleries.

okay, so probably just a problem with image gallery items.

@creedon actually when you do that, it applies also to the desktop style. There is no differenciation on the back end if you change on the desktip size it will apply the same on the mobile style.

@tuanphan this is great it worked great with the code you gave to @ThrivePhotography I applied on my website for the homepage. On desktop I still have my 3 columns, I have one on mobile. but on Ipad I got three. is there a way top to have like two columns on ipad ? thanks a lot. It's for this page : https://www.maisonhesper.com

Hello, You won't be able to see what i want on my current website that is in version 7.0. But in the backend I'm using the version 7.1 to test before pushing the update. I was actually wondering how you do to build a page like the one you can see here : https://www.jordansapally.com/restaurants especially for the HOVER function. Is it available for any template ? Thanks