Jump to content

Why is my Homepage Blank on a 768px Browser?

Recommended Posts

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
  • Replies 5
  • Views 672
  • Created
  • Last Reply
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.