topic Hide background image on mobile device in CMS Development

Hide background image on mobile device

StormieHaller — Mon, 29 Oct 2018 16:20:09 GMT

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!

Re: Hide background image on mobile device

Stephanie-OG — Mon, 29 Oct 2018 21:30:51 GMT

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!

Re: Hide background image on mobile device

StormieHaller — Tue, 30 Oct 2018 13:50:15 GMT

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

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.

Re: Hide background image on mobile device

Stephanie-OG — Tue, 30 Oct 2018 15:08:33 GMT

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!