tuanphan Posted June 10, 2022 Share Posted June 10, 2022 On 6/3/2022 at 10:55 PM, gwynethm said: Happy Friday! My CEO brought this request to me this morning. I need to remove the excessive white space from the mobile version of our website (desktop version is fine), and I'm not sure how to find the correct id for the section in question. - I'm assuming that is the difference with all the answers that have been given before this request. - It happens on every page, so I'm guessing it's something to do with the header? I'm including a screenshot and the URL below. If you could please help, I would be so thankful! Thanks in advance! https://www.mainstreetruralhealth.com/ Add to Design > Custom CSS @media screen and (max-width:767px) { [data-section-id="60c0f388a0d13b2463e73581"] { padding-top: 0px !important; min-height: unset !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
BrianaG Posted July 21, 2022 Share Posted July 21, 2022 (edited) Hello friends! New to Squarespace, so forgive my ignorance, but I'm am losing my mind over extra space below my home page gallery (see pic.) At first, the gallery was perfect on desktop but getting cutoff on mobile, so I added the code below. This fixed the issue, but then created the extra white space below the gallery. I've combed through the forums looking for a solution, but none of them seem to work. Any advice is appreciated. Thank you! www.jamesjansenphotography.com Password: TempLogin2022 <style> @media screen and (max-width:767px) { .gallery-fullscreen-slideshow[data-width="full-bleed"] { height: 35vh !important; } } </style> Edited July 21, 2022 by BrianaG Forgot website address Link to comment
tuanphan Posted July 22, 2022 Share Posted July 22, 2022 7 hours ago, BrianaG said: Hello friends! New to Squarespace, so forgive my ignorance, but I'm am losing my mind over extra space below my home page gallery (see pic.) At first, the gallery was perfect on desktop but getting cutoff on mobile, so I added the code below. This fixed the issue, but then created the extra white space below the gallery. I've combed through the forums looking for a solution, but none of them seem to work. Any advice is appreciated. Thank you! www.jamesjansenphotography.com Password: TempLogin2022 <style> @media screen and (max-width:767px) { .gallery-fullscreen-slideshow[data-width="full-bleed"] { height: 35vh !important; } } </style> Your page content too short on mobile, is not enough to fill the height of the phone, so it will appear. BrianaG 1 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
BrianaG Posted July 22, 2022 Share Posted July 22, 2022 54 minutes ago, tuanphan said: Your page content too short on mobile, is not enough to fill the height of the phone, so it will appear. Oh my goodness...could it really be that simple? I feel like an idiot. 🤪 I'll add some text or something and hopefully that fixes it. Tuanphan - thank you for your time here. I truly appreciate your insight and expertise. 🙏 Link to comment
Bnfrank Posted November 22, 2022 Share Posted November 22, 2022 I struggled with this for a long time! I finally discovered, if I click the mobile preview, I can edit the position, spacing, etc. of how how it looks in mobile without changing how it looks on desktop. It was seriously life-changing! Link to comment
WalidAlWawi Posted December 18, 2022 Share Posted December 18, 2022 Can anyone please help me! Samt.co/school On desktop there is a huge white space that I can’t seem to figure out! Link to comment
tuanphan Posted December 21, 2022 Share Posted December 21, 2022 On 12/18/2022 at 11:02 PM, WalidAlWawi said: Can anyone please help me! Samt.co/school On desktop there is a huge white space that I can’t seem to figure out! Add to Design > Custom CSS div#siteWrapper { min-height: unset !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
WalidAlWawi Posted December 23, 2022 Share Posted December 23, 2022 On 12/21/2022 at 5:34 AM, tuanphan said: Add to Design > Custom CSS div#siteWrapper { min-height: unset !important; } Can’t thank you enough ! Link to comment
WalidAlWawi Posted December 23, 2022 Share Posted December 23, 2022 On 12/21/2022 at 5:34 AM, tuanphan said: Add to Design > Custom CSS div#siteWrapper { min-height: unset !important; } Can I get the same thing but for mobile as well if you see page Samt.co/about when I close both accordions the page is left with big white space. Link to comment
tuanphan Posted December 27, 2022 Share Posted December 27, 2022 On 12/23/2022 at 6:41 PM, WalidAlWawi said: Can I get the same thing but for mobile as well if you see page Samt.co/about when I close both accordions the page is left with big white space. You are using new editor, try editing page > Click Mobile icon on top right > Then adjust section height. This won't affect desktop 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
WalidAlWawi Posted December 30, 2022 Share Posted December 30, 2022 On 12/27/2022 at 5:44 AM, tuanphan said: You are using new editor, try editing page > Click Mobile icon on top right > Then adjust section height. This won't affect desktop I tried that but it doesn’t work it wont allow me to resize smaller than the open accordions. Link to comment
tuanphan Posted January 4, 2023 Share Posted January 4, 2023 On 12/30/2022 at 3:11 PM, WalidAlWawi said: I tried that but it doesn’t work it wont allow me to resize smaller than the open accordions. Try adding this to Design > Custom CSS @media screen and (max-width: 767px){ .fe-block.fe-block-yui_3_17_2_1_1671210576842_6961 { grid-area: ~"9/2/11/10" !important; } .fe-block-yui_3_17_2_1_1670920146516_148014 { grid-area: ~"2/2/8/10" !important; } .fe-63983a584099c965404a32b0 { grid-template-rows: repeat(10,minmax(24px, 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
GabieG Posted February 4, 2023 Share Posted February 4, 2023 (edited) Hello, the mobile version of my website for this specific page has a big block of blank space at the bottom (I'm using gallery-grid version) https://www.ontheroadstyle.com/white-label How do I remove this? If I align at the top, the bottom gets the big blank space, and if I align center or bottom, then the top gets a big blank space. Here's a screenshot Thank you Edited February 4, 2023 by GabieG Link to comment
existinspired Posted February 7, 2023 Share Posted February 7, 2023 Hi - I also am having this issues, my site is older, not the 7.1 https://www.existinspired.com/about On mobile mode there is a large blank white space between the menu top and the content of the page. Also the header cover image of my site displays weird on mobile mode... I've tried most of the custom CSS shared here, none worked for me... maybe I am doing it wrong. Please advise, thank you! Link to comment
tuanphan Posted February 11, 2023 Share Posted February 11, 2023 On 2/4/2023 at 6:28 PM, GabieG said: Hello, the mobile version of my website for this specific page has a big block of blank space at the bottom (I'm using gallery-grid version) https://www.ontheroadstyle.com/white-label How do I remove this? If I align at the top, the bottom gets the big blank space, and if I align center or bottom, then the top gets a big blank space. Here's a screenshot Thank you It is fine to me now On 2/8/2023 at 12:18 AM, existinspired said: Hi - I also am having this issues, my site is older, not the 7.1 https://www.existinspired.com/about On mobile mode there is a large blank white space between the menu top and the content of the page. Also the header cover image of my site displays weird on mobile mode... I've tried most of the custom CSS shared here, none worked for me... maybe I am doing it wrong. Please advise, thank you! Add to Design > Custom CSS @media screen and (max-width:900px) { div#page-header-wrapper { height: 200px !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
ineedhelp2 Posted March 10, 2023 Share Posted March 10, 2023 Hello, please help. I'm struggling to remove the invisible space on top of my gallery-block in mobile. Please help thank you! Link to comment
tuanphan Posted March 12, 2023 Share Posted March 12, 2023 On 3/10/2023 at 1:30 PM, ineedhelp2 said: Hello, please help. I'm struggling to remove the invisible space on top of my gallery-block in mobile. Please help thank you! What is site url? We can help 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
ineedhelp2 Posted March 13, 2023 Share Posted March 13, 2023 On 3/12/2023 at 5:16 PM, tuanphan said: What is site url? We can help easier https://axismundi-design.squarespace.com/ Tried fixing it by moving the blocks, ends up it's fixed in apple phone but broken in Samsung, and vice versa Link to comment
tuanphan Posted March 16, 2023 Share Posted March 16, 2023 On 3/10/2023 at 1:30 PM, ineedhelp2 said: Hello, please help. I'm struggling to remove the invisible space on top of my gallery-block in mobile. Please help thank you! Hi, Which page? It looks fine on homepage https://axismundi-design.squarespace.com/ 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
HeatherA Posted June 16, 2023 Share Posted June 16, 2023 Hi, i'm also having trouble removing white space from my mobile site - I have read every thread and tried every CSS suggestions but none work. Can anyone help please?https://www.heatherallen.co.uk/robert-william-allen Link to comment
tuanphan Posted June 20, 2023 Share Posted June 20, 2023 On 6/16/2023 at 8:12 PM, HeatherA said: Hi, i'm also having trouble removing white space from my mobile site - I have read every thread and tried every CSS suggestions but none work. Can anyone help please?https://www.heatherallen.co.uk/robert-william-allen Add to Design > Custom CSS /* mobile remove blank space */ @media screen and (max-width:767px) { .fe-634172e98447e01e5b16f1d0 { grid-template-rows: repeat(160,minmax(24px, 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
Mary_DG Posted June 29, 2023 Share Posted June 29, 2023 Hello @tuanphan I am trying to the same from our site and the codes here doesn't seem to work on mine. the page is: https://www.hellocinnamon.com/start-of-a-journey I need to decrease the space between the image and the caption too. Thank you in advance. Link to comment
tuanphan Posted July 1, 2023 Share Posted July 1, 2023 On 6/30/2023 at 6:45 AM, Mary_DG said: Hello @tuanphan I am trying to the same from our site and the codes here doesn't seem to work on mine. the page is: https://www.hellocinnamon.com/start-of-a-journey I need to decrease the space between the image and the caption too. Thank you in advance. Add to Design > Custom CSS /* Mobile Slideshow Gap */ @media screen and (max-width:767px) { .gallery-slideshow { margin: 0 !important; padding-top: 0 !important; } .fe-6490c89f2289d0d04a66ffeb { row-gap: 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
Mary_DG Posted July 3, 2023 Share Posted July 3, 2023 Thank you so much @tuanphan can we decrease the top portion further? Link to comment
tuanphan Posted July 5, 2023 Share Posted July 5, 2023 On 7/4/2023 at 5:53 AM, Mary_DG said: Thank you so much @tuanphan can we decrease the top portion further? Try new code then save & reload the site /* Mobile Slideshow Gap */ @media screen and (max-width:767px) { .gallery-slideshow { margin: 0 !important; padding-top: 0 !important; } .fe-6490c89f2289d0d04a66ffeb { row-gap: 0 !important; } .gallery-slideshow { 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment