Hide background image on mobile device

[StormieHaller]

I am trying to hide the background graphic for the top section of this landing page for mobile devices:

https://go.employstream.com/healthcare

Can you help?

Thank you!

[Stephanie-OG]

Hi there!

A quick fix would be to click into the Settings for your page, scroll down to Advanced Options and paste mobile styling using media queries in the Head HTML. 

I think you're referring to the background image, which would be this code (you can also add a colour instead of "none"): 

<style>
  @media (max-width: 479px) {
    .marquee {
       background: none !important;
    }
  }
</style>

But you can also hide the computer image with this code: 

<style>
  @media (max-width: 479px) {
    #hs_cos_wrapper_module_1540322396670198 {
      display: none !important;
    }
  }
</style>

I hope that helps!

---

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[StormieHaller]

Hello! I tried the following code to make the background blue instead of just removing the background all together, but it's not working: 

<style> @media (max-width: 479px) { .marquee {
background-color: #0C2E4E;
} } </style>

The ultimate plan is to include an image of the computer screen in the background image (so it's really large on desktop) and remove the smaller image of the desktop altogether. 

[Stephanie-OG · Accepted solution]

Hi @7storms

Instead of "background-color" use "background" to replace the image, you'll also want to add an "!important" to force the change, like this: 

<style>
  @media (max-width: 479px) {
    .marquee {
       background: #0C2E4E !important;
    }
  }
</style>

---

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!