Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Removing blank space on mobile version of site


Recommended Posts

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

Link to comment

Add to Home > Design > custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
On 4/10/2020 at 10:20 PM, tuanphan said:

Add to Home > Design > custom CSS


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

 

 

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.

Screen Shot 2020-04-25 at 12.35.44 AM.png

Edited by CarolynSmith
Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

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;
}
}

 

 

Edited by fourreign
Link to comment
  • 3 weeks later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Add to Home > design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Mobile View Issue.PNG

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...