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

Why is my Homepage Blank on a 768px Browser?


scholarsayze

Question

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

768-breakpoint.png

Link to comment

5 answers to this question

Recommended Posts

  • 1

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.

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
  • 0
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

768-breakpoint.png

Hi I resized to 768px but it still show?

image.thumb.png.dfede0d3b891b70b5e0b98c83dcea1cb.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

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

768-screen-1.jpg

768-screen-2.jpg

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