Jump to content

Removing blank space on mobile version of site

By Guest, in Code Blocks

Recommended Posts

tuanphan Level 17

tuanphan

Posted
Posted
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/

image.thumb.jpeg.848ca4b27cd0a09c4bac6bb8ffba1cdf.jpeg

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
  • 1 month later...
  • Replies 193
  • Views 27.7k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

creedon
creedon

@Danielabjo I suggest a different target for your CSS. @media screen and (max-width:767px) { .item-pagination-link {     max-width: unset; } } This is for v7.1 and a site-wide effect. It c

creedon
creedon

@Danielabjo You can hide the pagination site wide with the following. .item-pagination {   display : none;      } You won't need the other code if you use this code. Let us know how i

Danielabjo
Danielabjo

@creedon Thanks again. worked!!

Posted Images

BrianaG Level 1

BrianaG

Posted
Posted (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>

image.png

Edited by BrianaG
Forgot website address
Link to comment
tuanphan Level 17

tuanphan

Posted
Posted
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>

image.png

Your page content too short on mobile, is not enough to fill the height of the phone, so it will appear.

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 Level 1

BrianaG

Posted
Posted
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
  • 3 months later...
  • 4 weeks later...
tuanphan Level 17

tuanphan

Posted
Posted
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!

 

70E649EC-BA70-4FEC-8029-E176EE924442.png

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
tuanphan Level 17

tuanphan

Posted
Posted
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
tuanphan Level 17

tuanphan

Posted
Posted
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
  • 1 month later...
GabieG Level 1

GabieG

Posted
Posted (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

IMG_8860.PNG

Edited by GabieG
Link to comment
existinspired Level 1

existinspired

Posted
Posted

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 Level 17

tuanphan

Posted
Posted
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

IMG_8860.PNG

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
  • 4 weeks later...
tuanphan Level 17

tuanphan

Posted
Posted
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!

image.png.e74ab8d145d364ea95fe1a6a406599c4.png

Hi,

Which page? It looks fine on homepage

https://axismundi-design.squarespace.com/

image.png.5e040d6f32b8c649daedae6c5bcb3e38.png

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
  • 3 months later...
tuanphan Level 17

tuanphan

Posted
Posted
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

IMG_7512.PNG

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
  • 2 weeks later...
tuanphan Level 17

tuanphan

Posted
Posted
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

 

 

image.png.fbfb9af19ab400cbe2b04947b3cf111f.png

 

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
tuanphan Level 17

tuanphan

Posted
Posted
On 7/4/2023 at 5:53 AM, Mary_DG said:

Thank you so much @tuanphan can we decrease the top portion further?

 

image.png.49a87107e4e241d3638f455f0a7bec7f.png
 

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources