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 post
  • Replies 33
  • Created
  • Last Reply

Top Posters In This Topic

Add to Home > Design > custom CSS

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
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.

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
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!! 

Link to post
  • 2 weeks later...
Posted (edited)

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 2 weeks later...

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?

Link to post

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

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 post
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?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 1 month later...

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. 

kk.jpg

ll.jpg

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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

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 post
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?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...