Jump to content

Blog post content doesn't show up on mobile with header code injection

Recommended Posts

Site URL: https://themindfulvillage.net

Hi,

I'm trying to display different header banner images for web and mobile, so i used the following code in the blog main page header code injection:

<style>
@media only screen and (max-width: 760px) {
    #page section:nth-of-type(1) { 
            display: none; 
    } 
  }
@media only screen and (min-width: 761px) {  
    #page section:nth-of-type(2) { 
        display: none !important;
    }
  }
</style>

However, while the blog main page turned out ass expected, I could not longer see the blog post content when i click into a post on mobile. Is there any workaround so that this code doesn't affect the individual blog post pages? Thank you so much!

Link to comment
On 4/13/2022 at 10:31 PM, ponby said:

Site URL: https://themindfulvillage.net

Hi,

I'm trying to display different header banner images for web and mobile, so i used the following code in the blog main page header code injection:

<style>
@media only screen and (max-width: 760px) {
    #page section:nth-of-type(1) { 
            display: none; 
    } 
  }
@media only screen and (min-width: 761px) {  
    #page section:nth-of-type(2) { 
        display: none !important;
    }
  }
</style>

However, while the blog main page turned out ass expected, I could not longer see the blog post content when i click into a post on mobile. Is there any workaround so that this code doesn't affect the individual blog post pages? Thank you so much!

Do you still need help?

Greeting, it's 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, Keyword Highlighter
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
On 4/13/2022 at 10:31 PM, ponby said:

Site URL: https://themindfulvillage.net

Hi,

I'm trying to display different header banner images for web and mobile, so i used the following code in the blog main page header code injection:

<style>
@media only screen and (max-width: 760px) {
    #page section:nth-of-type(1) { 
            display: none; 
    } 
  }
@media only screen and (min-width: 761px) {  
    #page section:nth-of-type(2) { 
        display: none !important;
    }
  }
</style>

However, while the blog main page turned out ass expected, I could not longer see the blog post content when i click into a post on mobile. Is there any workaround so that this code doesn't affect the individual blog post pages? Thank you so much!

Change to this code

<style>
@media only screen and (max-width: 760px) {
    body:not(.view-item) #page section:nth-of-type(1) { 
            display: none; 
    } 
  }
@media only screen and (min-width: 761px) {  
    body:not(.view-item) #page section:nth-of-type(2) { 
        display: none !important;
    }
  }
</style>

 

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

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