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

12 hours ago, Ola26 said:

I am having the same problem with spacing on mobile site between image and text

www.om-therapy.com

Thanks

 

Screenshot 2021-11-21 at 18.43.51.png

Add to Design > Custom CSS > Then save & reload the site

/* remove white space on mobile */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1538566846202_16007 .image-inset {
    padding-bottom: 10% !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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 11/23/2021 at 8:19 PM, Ola26 said:

Thanks, that worked for me. I am now trying to remove another space between the main picture and the text, mobile version has a bigger spacing than a desktop, could you please advice again?

Screenshot 2021-11-23 at 13.19.09.png

Screenshot 2021-11-23 at 13.19.22.png

Add to Design > Custom CSS

/* space between top image text */
@media screen and (max-width:640px) {
div#block-5596de8d5dfc76f14bd1 {
    padding-top: 0px !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 3 weeks later...

@NancyandKaz

If your image does not need to have text or other blocks floating over it then you may want to change to using an image block, with the help of some CSS.

Image blocks and background images behave differently and to make a background image behave like an image block is fighting against the system. Not saying it can't be done but the path of least resistance eh? 🙂

Please see Page Section First Blocks Full Bleed.

You can try this effect out and it you decide to use it be sure to remove the CSS you have for manipulating the background image.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Folks I have created two companion pieces of code that are similar to the above.

Please see Page Section Second Blocks Full Bleed if you need to make the second page section full bleed.

Please see Page Section Nth Blocks Full Bleed Template if you need to manipulate page sections other than the first or second. This is a template where you need to go in and set the number of the section you want to make full bleed.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 3 weeks later...

Site URL: https://www.mgdesignscape.uk/zara-redesign-case-study

Hi,

I recently created a portfolio site on Squarespace 7.1. I can see that there are unnecessary space between some images and the texts in one of my case studies. If i click on the mobile view on my site it does not show the space. But if I Iog in to my site from a mobile, then I see lots of negative space between some images and texts. Could you please help me remove those space? I am attaching two screenshots as refernces. Many thanks in advance. 

269646594_1024335541483121_2521513600858196349_n.jpeg

270320576_345547243750674_8857210124250935230_n.jpeg

Edited by Jumi
Link to comment

New user here, so learning curve is 😅. I tried pasting in the codes mentioned throughout this forum but it has not worked for me, my guess is I am not entering the code correctly. Could someone maybe walk me through the steps so that I can remove the extra space above menu items in mobile view? 

 

Thanks! 

Screenshot 2022-01-11 at 01.48.17.jpg

Link to comment
8 hours ago, katty said:

New user here, so learning curve is 😅. I tried pasting in the codes mentioned throughout this forum but it has not worked for me, my guess is I am not entering the code correctly. Could someone maybe walk me through the steps so that I can remove the extra space above menu items in mobile view? 

 

Thanks! 

Screenshot 2022-01-11 at 01.48.17.jpg

Add to Design > Custom CSS

.header-menu-nav-folder-content {
    justify-content: flex-start;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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...
On 3/1/2022 at 10:47 PM, dgaebel said:

Hi there. I'm having the same issue on mobile (Workshop & Calendar Pages) https://www.farmartscollective.org/ Help! Thank you 🙂

Hi. Looks fine to me. Can you take some screenshot of problem?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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...
16 hours ago, cheesemuncher42 said:

Please help me as well! Might only be an issue on chrome/firefox but for some reason my page is formatted like this on mobile, thank you!!

https://auroraproperties.live/

Screenshot (6).png

This looks weird. Try adding to Design > Custom CSS

html, body {
	overflow-x:hidden;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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...
20 hours ago, Madison_hanley said:

Hello there, I am struggling with the same issue of removing the white space below on mobile. Thank you for the assistance!

https://www.beginonballard.com/stories pass: byrne

 

1468928153_ScreenShot2022-03-24at11_24_09PM.thumb.png.371b5acb37cc0f5632e4c22221dde599.png

Add to Design > Custom CSS

/* Mobile-Stories page - Remove white */
@media screen and (max-width:767px) {
div#page-section-62316c9ca307fe58b4be8c18 .span-4:nth-child(2) {
    display: none;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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 3/31/2022 at 7:05 PM, christina_marie_333 said:

How do I remove this negative space on mobile http://www.enchantanddleight.con.au

All pages first child?

What is first child, you mean first section? Can you take a screenshot of space? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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,

I am having problems with some white space in my Portfolio section, but only in the mobile version. If someone could help me with this I would be extremely grateful! 

www.sebastianknutsen.com

white space.png

Link to comment
8 hours ago, sebknu said:

Hi,

I am having problems with some white space in my Portfolio section, but only in the mobile version. If someone could help me with this I would be extremely grateful! 

www.sebastianknutsen.com

white space.png

Add to Design > Custom CSS

/* Mobile black bar */
@media screen and (max-width:767px) {
body {
    background-color: black;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
58 minutes ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile black bar */
@media screen and (max-width:767px) {
body {
    background-color: black;
}
}

 

That was it, thank you so much!

Link to comment
  • 1 month later...

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

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