Hide background image on mobile device

SOLVE
Occasional Contributor

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!

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Solution
Regular Advisor

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>

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

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

View solution in original post

Reply
0 Upvotes
3 Replies 3
Regular Advisor

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!


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

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

Reply
0 Upvotes
Occasional Contributor

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. 

Reply
0 Upvotes
Solution
Regular Advisor

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>

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

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

View solution in original post

Reply
0 Upvotes