tuanphan Posted November 21, 2022 Share Posted November 21, 2022 On 11/17/2022 at 10:52 AM, Clindes said: portfolio-new.squarespace.comPasscode: port hey @tuanphan, so far I have the images full width, but there is a huge top space. for the one that has smaller height. just wonder if you can help me to look into this and if it's possible to make it align on the top underneath the menu bar? thanks. Sorry for delay. Just had some days off The image itself has a top padding, you can add this to Design > Custom CSS to unset it @media screen and (max-width:767px) { .gallery-slideshow-item img { top: 0 !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
EduPlusAE Posted January 25, 2023 Share Posted January 25, 2023 Hello @tuanphan i'm having a similar issue with slideshow view on mobile for https://eduplus.ae/ I used the code u provided (below) but it just crops the images without resizing. Also the font and button are quite big, they're not resized along. Could you please help? Thanks. <style> @media screen and (max-width:767px) { #page section:first-child { height: 40vh !important; min-height: unset !important; } } </style> Link to comment
tuanphan Posted January 26, 2023 Share Posted January 26, 2023 15 hours ago, EduPlusAE said: Hello @tuanphan i'm having a similar issue with slideshow view on mobile for https://eduplus.ae/ I used the code u provided (below) but it just crops the images without resizing. Also the font and button are quite big, they're not resized along. Could you please help? Thanks. <style> @media screen and (max-width:767px) { #page section:first-child { height: 40vh !important; min-height: unset !important; } } </style> Hi, You want Resize slide image Reduce button size Reduce text size Is that right? 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
HarrisonWW Posted January 26, 2023 Share Posted January 26, 2023 Hi @tuanphan! Having a really similar issue with a banner slideshow on my homepage. The images show up great on the desktop version, but are totally cropped on mobile. Have tried multiple codes that you've shared here to see if I can rectify, but nothing has worked yet. Site URL: https://garlic-emu-9yad.squarespace.com Any chance you have another solution? Thanks! Link to comment
EduPlusAE Posted January 28, 2023 Share Posted January 28, 2023 (edited) On 1/26/2023 at 8:10 AM, tuanphan said: Hi, You want Resize slide image Reduce button size Reduce text size Is that right? Hello @tuanphan yes correct. awaiting your kind reply. Edited February 7, 2023 by EduPlusAE Link to comment
tuanphan Posted January 28, 2023 Share Posted January 28, 2023 On 1/26/2023 at 2:25 PM, HarrisonWW said: Hi @tuanphan! Having a really similar issue with a banner slideshow on my homepage. The images show up great on the desktop version, but are totally cropped on mobile. Have tried multiple codes that you've shared here to see if I can rectify, but nothing has worked yet. Site URL: https://garlic-emu-9yad.squarespace.com Any chance you have another solution? Thanks! Use this @media screen and (max-width: 767px) { .user-items-list-item-container[data-section-id="63cb2a9b0fc5fa4674da2f99"] ul { min-height:unset !important; height: 30vh; } } 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
StacyD Posted February 2, 2023 Share Posted February 2, 2023 Hi @tuanphan, I read through the other posts but can't seem to find the fix for my issue. I have a gallery slideshow on my homepage with five photos. All photos are about the same size and dimensions (5760 x 3840) and look great on desktop, but only three of the five show up properly on mobile. The other two don't seem to be adjusting for mobile, so a good portion of the picture is cropped out. I am on 7.0, and tried some of the CSS code posted here but it didn't seem to change anything. https://sponge-clownfish-lxn8.squarespace.com/ Passcode: sqduffield Thanks for your help! Link to comment
StacyD Posted February 3, 2023 Share Posted February 3, 2023 I made an improvement by replacing the two pictures with different versions provided by my photographer (I figured that had something to do with it, as the the other three pics were from a different photographer.) They look better now, but I'd still like to know how to make them look the best on mobile (it's the indoor photos that don't quite convert as well.) Thanks! Link to comment
tuanphan Posted February 5, 2023 Share Posted February 5, 2023 On 2/3/2023 at 6:43 AM, StacyD said: Hi @tuanphan, I read through the other posts but can't seem to find the fix for my issue. I have a gallery slideshow on my homepage with five photos. All photos are about the same size and dimensions (5760 x 3840) and look great on desktop, but only three of the five show up properly on mobile. The other two don't seem to be adjusting for mobile, so a good portion of the picture is cropped out. I am on 7.0, and tried some of the CSS code posted here but it didn't seem to change anything. https://sponge-clownfish-lxn8.squarespace.com/ Passcode: sqduffield Thanks for your help! You want on mobile, it will be like this? 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
StacyD Posted February 6, 2023 Share Posted February 6, 2023 Hi, Yes. I think I fixed it now. I made some tweaks to the photos, and put in some custom code and I think it looks alright now on mobile. Appreciate your response and if you have any feedback! Thank you~ tuanphan and Summit227 2 Link to comment
aa53 Posted March 15, 2023 Share Posted March 15, 2023 @tuanphan I have similar issue, i want to remove the arrows from my banner slideshow on mobile - i have it off in settings and there isn't any arrow on desktop but it shows on mobile right now, wouldnt mind if the banner slideshow played on loop automatically too, please help https://deer-reindeer-c3g9.squarespace.com/ Link to comment
tuanphan Posted March 17, 2023 Share Posted March 17, 2023 On 3/16/2023 at 5:04 AM, aa53 said: image for exmaple What is password? 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
Innisfree77 Posted April 17, 2023 Share Posted April 17, 2023 Hello Tuan, I'm having a similar issue, I have tried several of the snippets of code included in this forum string but I can not seem to get the images in the "banner slideshow" on the "/home" page to resize for different screen sizes. You seem to have a good handle on the problem can you have a look and tell me what I'm doing wrong please. www.sweetwatermusicfestival.com I've listed a few of the different snippets I've tried below... I think I must just be getting a piece of the code incorrect... if you could help I'd really appreciate it. I've tried... /* resize mobile slideshow */ @media screen and (max-width:640px) { section#gallery { height: 30vh; } section#gallery img { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } } and... @media screen and (max-width: 460px) { .homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] { height: 40vh !important; } .homepage .gallery-fullscreen-slideshow[data-width="full"] { height: 40vh !important } .homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] img { object-fit: contain !important; } } and I even tried this from another designer. /*Shut off Parallax - Page Settings - Advanced*/ <script> Static.SQUARESPACE_CONTEXT.tweakJSON[“tweak-overlay-parallax-enabled”] = false; </script> /*Resize Background Index Image - Design - Advanced*/ @media screen and (max-width:400px) { #home { min-height:initial !important; display:-webkit-box; display:-ms-flexbox; display:flex; background-color:#000000; //change as needed -webkit-box-orient:vertical; -webkit-box-direction:reverse; -ms-flex-direction:column-reverse; flex-direction:column-reverse;} .Index-page-image { position:relative; height:40vh; } .Index-page-content { min-height:initial !important; padding-top:10px; } } Link to comment
tuanphan Posted April 20, 2023 Share Posted April 20, 2023 On 4/18/2023 at 12:23 AM, Innisfree77 said: Hello Tuan, I'm having a similar issue, I have tried several of the snippets of code included in this forum string but I can not seem to get the images in the "banner slideshow" on the "/home" page to resize for different screen sizes. You seem to have a good handle on the problem can you have a look and tell me what I'm doing wrong please. www.sweetwatermusicfestival.com I've listed a few of the different snippets I've tried below... I think I must just be getting a piece of the code incorrect... if you could help I'd really appreciate it. I've tried... /* resize mobile slideshow */ @media screen and (max-width:640px) { section#gallery { height: 30vh; } section#gallery img { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } } and... @media screen and (max-width: 460px) { .homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] { height: 40vh !important; } .homepage .gallery-fullscreen-slideshow[data-width="full"] { height: 40vh !important } .homepage .gallery-fullscreen-slideshow[data-width="full-bleed"] img { object-fit: contain !important; } } and I even tried this from another designer. /*Shut off Parallax - Page Settings - Advanced*/ <script> Static.SQUARESPACE_CONTEXT.tweakJSON[“tweak-overlay-parallax-enabled”] = false; </script> /*Resize Background Index Image - Design - Advanced*/ @media screen and (max-width:400px) { #home { min-height:initial !important; display:-webkit-box; display:-ms-flexbox; display:flex; background-color:#000000; //change as needed -webkit-box-orient:vertical; -webkit-box-direction:reverse; -ms-flex-direction:column-reverse; flex-direction:column-reverse;} .Index-page-image { position:relative; height:40vh; } .Index-page-content { min-height:initial !important; padding-top:10px; } } Add to Design > Custom CSS /* Mobile - Resize Slideshow */ @media screen and (max-width:767px) { .user-items-list-item-container[data-section-id="61f48c737bdd1d5866b6e367"] ul { min-height: unset !important; height: 300px; } .user-items-list-item-container[data-section-id="61f48c737bdd1d5866b6e367"] img { object-fit: contain !important; height: auto !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
SashaMk Posted April 21, 2023 Share Posted April 21, 2023 Hi Tuan, Cool to see you in this thread also! You are the godfather of this issue clearly 🙂 Ive tried all the solutions, with the 7.1 dynamic block thought I am a bit lost, and not managing to make the images also fill the VH set to full screen on mobile in the slider section. The idea is for the gallery to be as it is on desktop, and then take up almost full screen on mobile (but make the images which are originally horizontal fill the full height of the slider). Hope this makes sense! Thank you so much in advance! https://fuchsia-arugula-ml4y.squarespace.com/ PW: SV2023 SectionID: section[data-section-id="64415b63e195681f81f38a32"] Link to comment
tuanphan Posted April 23, 2023 Share Posted April 23, 2023 On 4/21/2023 at 5:49 PM, SashaMk said: Hi Tuan, Cool to see you in this thread also! You are the godfather of this issue clearly 🙂 Ive tried all the solutions, with the 7.1 dynamic block thought I am a bit lost, and not managing to make the images also fill the VH set to full screen on mobile in the slider section. The idea is for the gallery to be as it is on desktop, and then take up almost full screen on mobile (but make the images which are originally horizontal fill the full height of the slider). Hope this makes sense! Thank you so much in advance! https://fuchsia-arugula-ml4y.squarespace.com/ PW: SV2023 SectionID: section[data-section-id="64415b63e195681f81f38a32"] It looks like you figured it out? 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
SashaMk Posted April 24, 2023 Share Posted April 24, 2023 (edited) On 4/23/2023 at 10:56 AM, tuanphan said: It looks like you figured it out? Hi Tuan, [UPD: I actually found a different type of gallery section which already allows for this config 😅 thank you in any case! ] Unfortunately not, please kindly note the section I am referring to is the one with the slider and many photos at the end of the page. It doesnt show full screen of mobile. I tried several solution which you kindly proposed, but non seem to work. Is it something you can help with? 🙂 Thank you in advance! Edited April 24, 2023 by SashaMk Link to comment
tuanphan Posted April 25, 2023 Share Posted April 25, 2023 On 4/24/2023 at 5:49 PM, SashaMk said: Hi Tuan, [UPD: I actually found a different type of gallery section which already allows for this config 😅 thank you in any case! ] Unfortunately not, please kindly note the section I am referring to is the one with the slider and many photos at the end of the page. It doesnt show full screen of mobile. I tried several solution which you kindly proposed, but non seem to work. Is it something you can help with? 🙂 Thank you in advance! You mean this? 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
GHShadow Posted May 15, 2023 Share Posted May 15, 2023 Hello, I am having this issue with my site homepage slider. https://www.eandgassociates.org/ The code for 7.1 does not work for my mobile view. Link to comment
Summit227 Posted May 15, 2023 Share Posted May 15, 2023 3 hours ago, GHShadow said: Hello, I am having this issue with my site homepage slider. https://www.eandgassociates.org/ The code for 7.1 does not work for my mobile view. I'm not a SquareSpace pro like others here, but this may help. You should be able to adjust the Viewport Height value as you see fit. Best of luck! <style> @media screen and (max-width:767px) { .gallery-fullscreen-slideshow { height: 35vh !important; min-height: unset !important; } </style> Link to comment
Hotelier Posted May 15, 2023 Share Posted May 15, 2023 (edited) Hello @tuanphan, would you be able to help me out with a similar issue. I've tried several of the codes posted here with no avail. Trying to get the carousel slideshow on the top of the home page to auto-resize ? Website is: https://avinn.com/ Thank you so much! Edited May 17, 2023 by Hotelier Link to comment
GHShadow Posted May 15, 2023 Share Posted May 15, 2023 Thank you for this unfortunately the code did not change the mobile view for my page. Link to comment
Summit227 Posted May 17, 2023 Share Posted May 17, 2023 On 5/15/2023 at 5:39 PM, GHShadow said: Thank you for this unfortunately the code did not change the mobile view for my page. Apologies! Was working quickly and forgot the closing bracket on the query. Perhaps it still won't solve your problem, but either way I wanted to notify you of my mistake. <style> @media screen and (max-width:767px) { .gallery-fullscreen-slideshow { height: 35vh !important; min-height: unset !important; } } </style> Link to comment
AFKSTue Posted September 7, 2023 Share Posted September 7, 2023 On 10/2/2020 at 9:48 AM, tuanphan said: Add to Page Settings > Advanced > header <style> @media screen and (max-width:767px) { .gallery-fullscreen-slideshow[data-width="full-bleed"] { height: 35vh !important; } } </style> This code does almost exactly what I need. I like that I can adjust the height on the mobile screen. The only problem is, the resized image is centered. But I would like the image on the left not to be cut off. It should be left aligned instead. (The fading is part of the original banner image). Like so: Link to the page: copper-minnow-p73t.squarespace.com Password: hello 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