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

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!

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?

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>