LarryAP Posted October 23, 2020 Share Posted October 23, 2020 Site URL: https://www.alliancepackaging.ie I have a full width gallery block slideshow on my 7.1 site homepage. It looks great on desktop but only partially displays on mobile depending on where the focus has been set on the image, example below. I'd like to find a way of having the banner images display in full on mobile and wondered if anyone has ever found a workaround for this? Desktop: Mobile: Link to comment
tuanphan Posted October 24, 2020 Share Posted October 24, 2020 Add to Home > Design > Custom CSS @media screen and (max-width:767px) { .homepage .gallery-fullscreen-slideshow[data-width="full"] { height: 30vh !important; } } LarryAP and Chele 2 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
LarryAP Posted October 24, 2020 Author Share Posted October 24, 2020 59 minutes ago, tuanphan said: Add to Home > Design > Custom CSS @media screen and (max-width:767px) { .homepage .gallery-fullscreen-slideshow[data-width="full"] { height: 30vh !important; } } Amazing - thank you so much. You are a like Santa for Squarespace (except every day is Christmas)! Link to comment
zoebrock Posted October 29, 2020 Share Posted October 29, 2020 On 10/25/2020 at 11:55 AM, tuanphan said: Add to Home > Design > Custom CSS @media screen and (max-width:767px) { .homepage .gallery-fullscreen-slideshow[data-width="full"] { height: 30vh !important; } } So crazy that this doesn't work for me. Same issue - no solution. Link to comment
LarryAP Posted October 29, 2020 Author Share Posted October 29, 2020 @zoebrock - are you on 7.1 too? I had to tweak the "height: 30vh !important;" a bit to get it perfect on my site - you could try that. Also this is for a gallery block, slideshow, set to 'full' not 'full bleed'. Link to comment
tuanphan Posted October 30, 2020 Share Posted October 30, 2020 On 10/29/2020 at 2:10 PM, zoebrock said: So crazy that this doesn't work for me. Same issue - no solution. Can you share link to gallery? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Sherman Posted July 7, 2021 Share Posted July 7, 2021 Hi @tuanphan I have the same issue but the code doesn't work either - its a Squarespace 7.1 site. becoming30.riverlife.org.sg Appreciate the help. Thank you. Regards, Sherman Link to comment
tuanphan Posted July 9, 2021 Share Posted July 9, 2021 On 7/7/2021 at 2:46 PM, Sherman said: Hi @tuanphan I have the same issue but the code doesn't work either - its a Squarespace 7.1 site. becoming30.riverlife.org.sg Appreciate the help. Thank you. Regards, Sherman Hi. I don't see gallery on homepage on mobile. Where is it? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Sherman Posted July 9, 2021 Share Posted July 9, 2021 16 hours ago, tuanphan said: Hi. I don't see gallery on homepage on mobile. Where is it? Hi, It is the block right after the main screen, but i've hidden it in mobile mode for now as it doesn't appear nicely, but it appears on desktop I've attached a picture of it. Link to comment
tuanphan Posted July 13, 2021 Share Posted July 13, 2021 On 7/7/2021 at 2:46 PM, Sherman said: Hi @tuanphan I have the same issue but the code doesn't work either - its a Squarespace 7.1 site. becoming30.riverlife.org.sg Appreciate the help. Thank you. Regards, Sherman Remove the code to hide it on mobile & add this to Design > Custom CSS > Then save & reload the site /* reel mobile */ @media screen and (max-width:767px) { body.homepage .gallery-reel { height: 30vh !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
laure16 Posted October 3, 2021 Share Posted October 3, 2021 Hello , I have the same issue but the code doesn't work for me, can you check it ? I try with slideshow or just images This is my website : https://www.lauceramique.com/ password : paupiette Thanks !! Link to comment
LarryAP Posted October 3, 2021 Author Share Posted October 3, 2021 Hi Laure16 It could be the part of the code that says what type of gallery it is. The code says 'gallery-reel' but you may be using a different type of gallery? Could try changing that bit. Link to comment
laure16 Posted October 3, 2021 Share Posted October 3, 2021 Thank you for your response, I tried with user-items-banner-slideshow but didn't manage to resize it Link to comment
tuanphan Posted October 5, 2021 Share Posted October 5, 2021 On 10/3/2021 at 4:07 PM, laure16 said: Hello , I have the same issue but the code doesn't work for me, can you check it ? I try with slideshow or just images This is my website : https://www.lauceramique.com/ password : paupiette Thanks !! Add to Design > Custom CSS > Then save & reload the site @media screen and (max-width:767px) { .user-items-list-item-container[data-section-id="615482b52e9b9206f28e7a8d"] ul { min-height: 35vh !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
laure16 Posted October 5, 2021 Share Posted October 5, 2021 7 hours ago, tuanphan said: Add to Design > Custom CSS > Then save & reload the site @media screen and (max-width:767px) { .user-items-list-item-container[data-section-id="615482b52e9b9206f28e7a8d"] ul { min-height: 35vh !important; } } Thank you so much, it worked 🙂 !! Link to comment
Gold1987 Posted November 25, 2021 Share Posted November 25, 2021 Hello, I have the same issue but the code doesnt work for me too. Please help. Thank you. Link to comment
tuanphan Posted November 28, 2021 Share Posted November 28, 2021 On 11/25/2021 at 7:52 PM, Gold1987 said: Hello, I have the same issue but the code doesnt work for me too. Please help. Thank you. Can you share link to your site? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Adrina Posted December 5, 2021 Share Posted December 5, 2021 (edited) On 10/5/2021 at 4:15 AM, tuanphan said: Add to Design > Custom CSS > Then save & reload the site @media screen and (max-width:767px) { .user-items-list-item-container[data-section-id="615482b52e9b9206f28e7a8d"] ul { min-height: 35vh !important; } } Hi, Is there a way to make it fit for full bleed galleries (slideshow: full)? And on a page other than the homepage? Edited December 5, 2021 by Adrina Link to comment
tuanphan Posted December 13, 2021 Share Posted December 13, 2021 On 12/5/2021 at 11:42 PM, Adrina said: Hi, Is there a way to make it fit for full bleed galleries (slideshow: full)? And on a page other than the homepage? Edit the page where you have problem >> Add a Code Block (anywhere) >> paste this code <style> @media screen and (max-width:767px) { .user-items-list-item-container ul { min-height: 35vh !important; } } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Adrina Posted December 13, 2021 Share Posted December 13, 2021 6 hours ago, tuanphan said: Edit the page where you have problem >> Add a Code Block (anywhere) >> paste this code <style> @media screen and (max-width:767px) { .user-items-list-item-container ul { min-height: 35vh !important; } } </style> Unfortunately it's not working 😞 Link to comment
tuanphan Posted December 14, 2021 Share Posted December 14, 2021 20 hours ago, Adrina said: Unfortunately it's not working 😞 Can you share link to page where you have problem? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Adrina Posted December 17, 2021 Share Posted December 17, 2021 On 12/14/2021 at 7:14 AM, tuanphan said: Can you share link to page where you have problem? We can check easier I figured it out. Thank you!!!! Link to comment
ClaireHowes Posted February 26, 2022 Share Posted February 26, 2022 Hi, I'm trying to get my full bleed gallery to work on mobile. Could you take a look please? https://www.clairehowesportrait.com Link to comment
tuanphan Posted February 27, 2022 Share Posted February 27, 2022 20 hours ago, ClaireHowes said: Hi, I'm trying to get my full bleed gallery to work on mobile. Could you take a look please? https://www.clairehowesportrait.com I see you solved with this CSS? @media screen and (max-width: 767px) { .gallery-fullscreen-slideshow[data-width="full-bleed"] { height:27vh !important } } @media screen and (min-width: 768px) and (max-width:991px) { .gallery-fullscreen-slideshow[data-width="full-bleed"] { height:35vh !important } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
genya Posted February 28, 2022 Share Posted February 28, 2022 Could you please help, I can't get a full gallery view on mobile. I've tried all the codes above. www.ekkcandleart.com Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment