Change Header Image on Blog Post for Mobile View

I need to use a different header image for a specific blog post.

https://staging3.ryanlawn.com/blog/ryan-lawn-tree-named-to-the-great-game-of-business-2021-all-star-team/

I have tried different CSS variations, but to no avail.

@media (max-width: 767px) {
  .post-id-41012 .page-banner bg {
    background-image: url('https://staging3.ryanlawn.com/wp-content/uploads/2021/09/ggob-blog-banner-all-star-2021-m.jpg') !important;
  }
}

Thank you in advance for any suggestions.

Topic responsive blog css mobile Wordpress

Category Web

1
answered at

You're not calling the class correctly. The container has both the page-banner and the bg classes, so you should write it like this: .page-banner.bg

And the class post-id-41012 doesn't exist in your document. postid-41012 does.

So try this way:

@media (max-width: 767px) {
  .postid-41012 .page-banner.bg {
    background-image: url('https://staging3.ryanlawn.com/wp-content/uploads/2021/09/ggob-blog-banner-all-star-2021-m.jpg') !important;
  }
}

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.