Removing blank space on mobile version of site

Site URL: http://bradleystearn.co.uk/

I'm struggling to find a way to remove the negative/blank space on the mobile view of my website. Viewing on desktop the design is how I would like it, swithcing to a mobile view you'll see a lot of negative white space between my header, and the image slideshow. I've been hunting around the design section of the edit menu, but cannot find a way to remove this space, which doesn't affect the design of the desktop version. 

http://bradleystearn.co.uk/

Thank you

Add to Home > Design > custom CSS

@media screen and (max-width:767px) {
[data-section-id="5e80c87763d7965a88ad6cce"] .gallery-slideshow {
    height: 400px !important;
}
}

9 hours ago, tuanphan said:

Add to Home > Design > custom CSS

@media screen and (max-width:767px) {
[data-section-id="5e80c87763d7965a88ad6cce"] .gallery-slideshow {
    height: 400px !important;
}
}

 

Thank you very much, this did the job.

Hi, I am having the same issue with extra negative space on the mobile only view, but unfortunately this code is not working for my site on mobile. Below is my site and password. Could you help me solve this?

https://hulseygardens.squarespace.com/

password:1234

Thank you so much in advance.

2 hours ago, CarolynSmith said:

 

Hi, I am having the same issue with extra negative space on the mobile only view, but unfortunately this code is not working for my site on mobile. Below is my site and password. Could you help me solve this?

https://hulseygardens.squarespace.com/

password:1234

Thank you so much in advance.

 

Add to LAST LINE in Home > Design > Custom CSS

@media screen and (max-width:767px) {
#page article section:first-child {
    padding-top: 20px !important;
}
}

9 hours ago, tuanphan said:

Add to LAST LINE in Home > Design > Custom CSS

@media screen and (max-width:767px) {
#page article section:first-child {
    padding-top: 20px !important;
}
}

 

This worked perfectly! Thank you!! 

My site is here https://fourreign.squarespace.com/ password: PBnJJ2020

The gallery has such a high top and bottom white space. Any help on reducing it would be greatly appreciated! 

On 4/25/2020 at 12:54 AM, tuanphan said:

Add to LAST LINE in Home > Design > Custom CSS

@media screen and (max-width:767px) {
#page article section:first-child {
    padding-top: 20px !important;
}
}

 

On 5/4/2020 at 5:15 PM, fourreign said:

My site is here https://fourreign.squarespace.com/ password: PBnJJ2020

The gallery has such a high top and bottom white space. Any help on reducing it would be greatly appreciated! 

 

Add to Home > Design > Custom CSS

.gallery-slideshow {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

Hi, 

I have tried variations of this code on my site but nothing seems to work. I really want to remove the blank space at the top of the page just after the menu, and further down where the video is, both on the mobile view. 

https://www.corporate-away-days.co.uk/ this is the website, would you be able to help?

Add this

@media screen and (max-width: 640px) {
    div#block-yui_3_17_2_1_1579543118649_5751 .embed-block-wrapper {
        padding-bottom: !important;
        background-color: #c9e9f6
    }

    section#cadvideo {
        min-height: unset !important;
        height: auto !important
    }

    .homepage .Parallax-item:nth-child(2) {
        width: 100% !important;
        left: 0 !important;
        height: auto !important
    }
}

Hi! My website also has a lot of blank space above and below my slideshows on the home page when in Mobile. I am trying the codes above but not having luck. I may be doing it wrong though. Would someone look at it? It is meaganleighphoto.com. Thanks!!

6 hours ago, megj192332 said:

Hi! My website also has a lot of blank space above and below my slideshows on the home page when in Mobile. I am trying the codes above but not having luck. I may be doing it wrong though. Would someone look at it? It is meaganleighphoto.com. Thanks!!

 

Can you share access password?

@tuanphan Wondering if this is similar to whats going on this the site im building? It has a black space on every single page on mobile.

https://emu-tuatara-5dd6.squarespace.com/

Password: hls123

Would really appreciate help I'm going stir crazy

On 6/20/2020 at 10:14 AM, michelle2 said:

@tuanphan Wondering if this is similar to whats going on this the site im building? It has a black space on every single page on mobile.

https://emu-tuatara-5dd6.squarespace.com/

Password: hls123

Would really appreciate help I'm going stir crazy

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
body {
    margin-top: 0 !important;
}
}

@tuanphanSeriously Thank you!!!!!!!!!!

Hi there - I've got the same issue on my end. 

On mobile, there's a lot of padding either on the photo or the banner. Please see image attached to see what I mean.

Can you please assist? https://www.handford.com/

On 7/3/2020 at 8:34 PM, Handford said:

Hi there - I've got the same issue on my end. 

On mobile, there's a lot of padding either on the photo or the banner. Please see image attached to see what I mean.

Can you please assist? https://www.handford.com/

  

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 40vh !Important;
}
}

Brilliant thank you very much @tuanphan !!

Hi there, I have a similar problem. I am trying to use the grid simple to display a set of different images. It works fine on desktop, but on mobile there are large spaces. Is there any help anyone can provide?

The link to an example page is: https://tulip-fiddle-66zm.squarespace.com/config/ 

Many thanks
 

Hi there - I've got the same issue on my end. 

On the right side of my mobile view, there is this big blank area that i want to cutt off. I have tried overflow hidden but that also disables my scrolling. Hope you can help me. 

17 hours ago, DanR85 said:

Hi there, I have a similar problem. I am trying to use the grid simple to display a set of different images. It works fine on desktop, but on mobile there are large spaces. Is there any help anyone can provide?

The link to an example page is: https://tulip-fiddle-66zm.squarespace.com/config/ 

Many thanks

Can you share link to exact page in screenshot?

41 minutes ago, Marcus5555 said:

Hi there - I've got the same issue on my end. 

On the right side of my mobile view, there is this big blank area that i want to cutt off. I have tried overflow hidden but that also disables my scrolling. Hope you can help me. 

What is site url?

@tuanphan The url is https://tulip-fiddle-66zm.squarespace.com/client-projects/mill-house-renovation-carisbrooke.

Many thanks

On 8/13/2020 at 1:02 PM, DanR85 said:

@tuanphan The url is https://tulip-fiddle-66zm.squarespace.com/client-projects/mill-house-renovation-carisbrooke.

Many thanks

Add to Home > design > Custom CSS

@media screen and (max-width:767px) {
.gallery-slideshow {
    margin-bottom: 0;
}
}

None of the codes provided are working for me when trying to eliminate the blank space on the mobile view of my homepage. Provided is a screenshot of my mobile view plus the existing code I'm using (courtesy of tuanphan in another thread - thanks for that!) to scale my background graphics down to fit the mobile screen. I love that the pictures fit the screen now, but the big block of dead space underneath is undesirable, and none of the codes I've seen have been able to eliminate the dead space. Please help!

URL is https://cenpublications.squarespace.com/

Editing this website for a friend, and getting very frustrated with the dead space that I can't get rid of. I wish I could edit the mobile view to optimize my graphics for mobile without impacting the desktop view...

30 minutes ago, Maralexa said:

None of the codes provided are working for me when trying to eliminate the blank space on the mobile view of my homepage. Provided is a screenshot of my mobile view plus the existing code I'm using (courtesy of tuanphan in another thread - thanks for that!) to scale my background graphics down to fit the mobile screen. I love that the pictures fit the screen now, but the big block of dead space underneath is undesirable, and none of the codes I've seen have been able to eliminate the dead space. Please help!

URL is https://cenpublications.squarespace.com/

Editing this website for a friend, and getting very frustrated with the dead space that I can't get rid of. I wish I could edit the mobile view to optimize my graphics for mobile without impacting the desktop view...

 

I don't see black space. Did you solve?