Why is my Homepage Blank on a 768px Browser?

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home

Hello

I currently have some code that I am using to display one header section for Desktop, and switch to another header section for Tablet and Mobile. The reason behind this is that my first design for Desktop does not look good on mobile. The code also allows me to see the sections in 'edit' mode making it a lot easier to tweak the design if I need to. Here's the code:

12 hours ago, scholarsayze said:

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home

Hello

I currently have some code that I am using to display one header section for Desktop, and switch to another header section for Tablet and Mobile. The reason behind this is that my first design for Desktop does not look good on mobile. The code also allows me to see the sections in 'edit' mode making it a lot easier to tweak the design if I need to. Here's the code:

/* HOME - HIDES HEADER SECTION 1 FROM MOBILE BUT LEAVES IN EDIT MODE - ESSENTIALLY, THIS CSS CODE WOULD ONLY RUN IF THE SCREEN SIZE OF THE DEVICE IS 768px OR LESS*/
@media only screen and (max-width: 768px) {
    body:not(.sqs-edit-mode) section[data-section-id="5fec522cbb6ff82c0aae7a7f"] {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }
body.sqs-edit-mode section[data-section-id="5fec522cbb6ff82c0aae7a7f"] {opacity: 0.5 !important;}
}

/* HOME - HIDES HEADER SECTION 2 FROM DESKTOP BUT LEAVES IN EDIT MODE - ESSENTIALLY, THIS CSS CODE WOULD ONLY RUN IF THE SCREEN SIZE OF THE DEVICE IS GREATER OR EQUAL TO 768px*/
@media only screen and (min-width: 768px) {
    body:not(.sqs-edit-mode) section[data-section-id="5fedd1a50db4f45ccb5e94ae"] {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }
body.sqs-edit-mode section[data-section-id="5fedd1a50db4f45ccb5e94ae"] {opacity: 0.5 !important;}
}
 

I noticed today that if I resize my browser down to 768px, my homepage is blank (see attached image).

Have I missed something in my code? I believe iPads breakpoint is at 768px so I just want to be sure my page is visible across all breakpoints.

Please help.

Many thanks,

Best,

Faiz

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home

Pword - bluebird

Hi I resized to 768px but it still show?

I can confirm what bangank36 is seeing. All looked good to me.

Can you tell us more about device, OS and browser you are viewing on?

Thanks guys, apologies I added an extra banner last night (without any code) so perhaps this is what you were seeing.

I am viewing using my Surface Pro 6 via Chrome. I don't actually have an iPad but I am using this tool http://howbigismybrowser.com/ to confirm the screen size (see attached @768px wide).

I have removed that additional banner now, just the two sections remain with the above code. Again, I am not seeing either banner at 768px (see attached).

Please would you mind double checking?

Many thanks!

Best,

Faiz

Remove, make a copy somewhere, or comment out the following CSS.

@media only screen and (max-width: 768px) {
    body:not(.sqs-edit-mode) section[data-section-id="5fff1e1e7f507d702792c87b"] {
        display:none !important;
        visibility: hidden !important;
        opacity: 0 !important
    }

    body.sqs-edit-mode section[data-section-id="5fff1e1e7f507d702792c87b"] {
        opacity: .5 !important
    }
}

@media only screen and (min-width: 768px) {
    body:not(.sqs-edit-mode) section[data-section-id="5fedd1a50db4f45ccb5e94ae"] {
        display:none !important;
        visibility: hidden !important;
        opacity: 0 !important
    }

    body.sqs-edit-mode section[data-section-id="5fedd1a50db4f45ccb5e94ae"] {
        opacity: .5 !important
    }
}

Add the following CSS.

/* HOME - HIDES HEADER SECTION 1 FROM MOBILE BUT LEAVES IN EDIT MODE - ESSENTIALLY, THIS CSS CODE WOULD ONLY RUN IF THE SCREEN SIZE OF THE DEVICE IS 767px OR LESS */

@media only screen and ( max-width: 767px ) {

  body:not( .sqs-edit-mode ) section[data-section-id="5fff1e1e7f507d702792c87b"] {
  
    display: none;
    
    }
    
  body.sqs-edit-mode section[data-section-id="5fff1e1e7f507d702792c87b"] {
  
    opacity: 0.5;
    
    }
  }

/* HOME - HIDES HEADER SECTION 2 FROM DESKTOP BUT LEAVES IN EDIT MODE - ESSENTIALLY, THIS CSS CODE WOULD ONLY RUN IF THE SCREEN SIZE OF THE DEVICE IS GREATER OR EQUAL TO 768px */

@media only screen and ( min-width: 768px ) {

  body:not( .sqs-edit-mode ) section[data-section-id="5fedd1a50db4f45ccb5e94ae"] {
  
    display: none;
    
    }
    
  body.sqs-edit-mode section[data-section-id="5fedd1a50db4f45ccb5e94ae"] {
  
    opacity: 0.5;
    
    }
  }

Alternately you could add the CSS to Page Settings > Advanced > Page Header Code Injection for each page where you want to achieve the effect.

<style>
  
  /* HOME - HIDES HEADER SECTION 1 FROM MOBILE BUT LEAVES IN EDIT MODE - ESSENTIALLY, THIS CSS CODE WOULD ONLY RUN IF THE SCREEN SIZE OF THE DEVICE IS 767px OR LESS */
  
  @media only screen and ( max-width: 767px ) {
  
    body:not( .sqs-edit-mode ) section:nth-child( 1 ) {
      
      display: none;
      
      }
      
    body.sqs-edit-mode section:nth-child( 1 ) {
    
      opacity: 0.5;
      
      }
    }
    
  /* HOME - HIDES HEADER SECTION 2 FROM DESKTOP BUT LEAVES IN EDIT MODE - ESSENTIALLY, THIS CSS CODE WOULD ONLY RUN IF THE SCREEN SIZE OF THE DEVICE IS GREATER OR EQUAL TO 768px */
  
  @media only screen and ( min-width: 768px ) {
  
    body:not( .sqs-edit-mode ) section:nth-child( 2 ) {
    
      display: none;
      
      }
      
    body.sqs-edit-mode section:nth-child( 2 ) {
    
      opacity: 0.5;
      
      }
    }
    
  </style>

The issue was that the two rule-sets were both set to display no section at 768px.

Let us know how it goes.

Hey Creedon many thanks for your detailed and VERY helpful solution - that fixed that issue!!! Awesome support!!!

I would never have been able to notice and figure that error! THANK YOU SO MUCH!!! 💯💗

Best,

Faiz