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

How Do I Remove Mystery White Space on Mobile? (Brine)

Question

Posted (edited)

Site URL: https://www.bottlerocketrecording.co.uk/

Hi @tuanphan,

I've recently redesigned my site – transferring from Pacific to Brine (in favor of more editing options). It's not been the smoothest of transitions and I've had to dip into CSS to facilitate what I'd thought were some pretty basic requirements. Anyway I'm pretty much there now apart from some frustrating glitches on mobile view, as explained below.

On mobile: The header at the top keeps mysteriously adding 8px + worth of padding to the top and bottom which is contributing to – if not wholly – causing it to obscure my section headings when using index scrolling from the hamburger menu. I've isolated the .mobile bar section and removed 8px with CSS but if you compare it to the desktop view there is clearly still more white space added around my branding box. Cosmetically – I'd obviously rather it were thinner but it's not that big a deal, but I do need it not to obscure my headings during scrolling, so it has to be fixed one way or another.

On Mobile, BLOG PAGE: There is another mystery white space between the "Notes from the Studio" intro Banner and the nav/branding bar at the top. I've tried reducing padding to that area using CSS and site styles. In most cases just causes the "notes from the Studio" banner to be chopped into. I've also tried that banner image in a number of different shapes and sizes and always get the same issue. Furthermore there have been many occasions where I seem to have fixed it – I go to my mobile device immediately after editing and it displays perfectly as as it should. Then then on reloading the page – the white space jumps back – almost saying "WAIT, I'M STILL HERE!, pushing the banner down again. This has been incredibly frustrating, especially when resizing and adjusting the padding to the "notes from ..." image block. In the section editor, Squarespace will show that I've solved the problem – everything looks fine – and then I open it on my actual phone and the white space is either still there or I've chopped the top or bottom off my banner. My only conclusion is there must be some rogue code somewhere that's over-riding everything or even a ghost block that can't be deleted that is pushing things to flow around it.

Hoping someone can shed some light!

Thanks!

Screen Shot 2020-06-16 at 15.26.59.png

Screen Shot 2020-06-16 at 15.27.15.png

Edited by BottleRocket1

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 0
Posted (edited)

Yes, I have a solution for this! I stumbled upon this same issue a while ago and it was driving me nuts. The following code seems to solve it for me...

I guess I should add that this has worked on 7.0, not sure about 7.1 version.

.Mobile-bar.Mobile-bar--bottom {
  padding: 0!important;
}

Thanks, Kacee

Edited by kaceelaine
Adding version of Squarespace

Share this post


Link to post
  • 0

Hi! 

I'm not too sure how this forum works, but wondering if you could help me as I have a similar problem on the Pacific template for mobile, does anyone have any suggestions for the code that I could use to get rid of the extra space, the code above deosn't seem to work? (in between the logo and the header 'Treatment menu') 

912705722_Screenshot2020-07-09at21_11_15.png.be64dde284d0de274aeebe401c73c70d.png

Thanks 

 

Kerry 

Share this post


Link to post
  • 0
On 7/8/2020 at 12:23 AM, kaceelaine said:

Yes, I have a solution for this! I stumbled upon this same issue a while ago and it was driving me nuts. The following code seems to solve it for me...

I guess I should add that this has worked on 7.0, not sure about 7.1 version.


.Mobile-bar.Mobile-bar--bottom {
  padding: 0!important;
}

Thanks, Kacee

Hmm...this isn't working for me 😞

Share this post


Link to post
  • 0
Posted (edited)

Sure! Here's my website: www.joyindementia.com

Issue: On my homepage, I want to target and control the amount of white space between sections when changing between desktop and mobile. (This issue seems to only occur on my Homepage, and no other pages)

Template: Brine (Sonny)

Blank Space (Padding?): On my Homepage, the amount of white space between sections is perfect when in desktop and tablet modes, but there's too much white space between sections when viewed on mobile. 

See images below and attached. 

The extra padding I'm trying to decrease on mobile is found in three main places:

1) Between the announcement bar and the picture of the candle

2) Between the candle picture and the "Featured In:" logos

3) After the "Featured In:" logos

Question: Can you help me decrease the white space between the above sections on my homepage, when seen on mobile? Ideally the same proportion as it appears for desktop below. *Note that I've already tried multiple media rules codes in my CSS and they haven't made a difference 😞 * 

Website: joyindementia.com 

Thank you again for your help!

Laura

 

DESKTOP:

1905945781_ScreenShot2020-07-15at6_44_55PM.thumb.png.e6db751f021f696e8b3a931a4d130aa6.png

 

MOBILE:

44424434_ScreenShot2020-07-15at6_45_14PM.png.41e16a8681f631f65afb876d2473d613.png

Edited by shykoala4

Share this post


Link to post
  • 0
Posted (edited)
@media screen and (max-width: 639px){
  #pitch {
    min-height: unset !important;
  }

  #block-yui_3_17_2_1_1559189131342_7573 {
    padding: 0 !important;
  }
  
  #block-c6a5be37ddcf5791e077 {
    padding-top: 0 !important;
  }
  #biotease {
    margin-top: -17px;
  }
}

 

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
On 7/22/2020 at 11:41 PM, rwp said:

@media screen and (max-width: 639px){
  #pitch {
    min-height: unset !important;
  }

  #block-yui_3_17_2_1_1559189131342_7573 {
    padding: 0 !important;
  }
  
  #block-c6a5be37ddcf5791e077 {
    padding-top: 0 !important;
  }
  #biotease {
    margin-top: -17px;
  }
}

 

This worked! Thank you so much!

Share this post


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