Remove image background on mobile ONLY

Hi there

I am trying to figure out how I can change the background color of a specific image #block background ("DISCOVER the goal that matters most").  Is there a way to remove the background color from green to blue and change the font to white on mobile only?


https://hazelseybert.squarespace.com/services-overview pw:DDD

3 hours ago, Lucia_ said:

Hi there

I am trying to figure out how I can change the background color of a specific image #block background ("DISCOVER the goal that matters most").  Is there a way to remove the background color from green to blue and change the font to white on mobile only?


https://hazelseybert.squarespace.com/services-overview pw:DDD

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  #block-6362fc605a58d739a1e4cebc {
    background-color: blue;
  }
  #block-6362fc605a58d739a1e4cebc span {
    color: #fff;
  }
}

Support me by pressing 👍  or marking as solution if this useful for you

3 hours ago, Beyondspace said:

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  #block-6362fc605a58d739a1e4cebc {
    background-color: blue;
  }
  #block-6362fc605a58d739a1e4cebc span {
    color: #fff;
  }
}

Support me by pressing 👍  or marking as solution if this useful for you

amazing, thank you very much for your help!!! it worked perfectly. 

15 hours ago, Beyondspace said:

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  #block-6362fc605a58d739a1e4cebc {
    background-color: blue;
  }
  #block-6362fc605a58d739a1e4cebc span {
    color: #fff;
  }
}

Support me by pressing 👍  or marking as solution if this useful for you

I have noticed if i want to add several block it won't work for the blue version (white section works perfectly further down) if I wanted to add another #block to that code can I add that to the same span?

@media only screen and (max-width: 767px) {
  #block-6362fc605a58d739a1e4cebc,  {
    background-color: #1e2f5a;
  }
 #block-6362fc605a58d739a1e4cebc span,
#block-6362fc60ca51a6f492817c66 span ?,   
  {
    color: #fff;
  }
}

13 hours ago, Lucia_ said:

I have noticed if i want to add several block it won't work for the blue version (white section works perfectly further down) it keeps removing the code colder of the block number and not the actual text.

 @Beyondspace do you know why this might be?

 

@media only screen and (max-width: 767px) {
  #block-6362fc605a58d739a1e4cebc,  {
    background-color: #1e2f5a;
  }
 #block-6362fc605a58d739a1e4cebc span,
#block-6362fc60ca51a6f492817c66 span ?,   
  {
    color: #fff;
  }
}

Which text are your targeting?

I check that you use image with the background and text on it so we can not set css to change them

You can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
	#block-6362fc605a58d739a1e4cebc.sqs-background-enabled.sqs-block-html {
		background: blue;
		* {
			color: #fff !important;
		}
	}
	#block-6362fc60ca51a6f492817c66.sqs-background-enabled.sqs-block-html {
		background: blue;
		* {
			color: #fff !important;
		}
	}
}

Hope it works properly on your site

8 hours ago, Beyondspace said:

You can try adding to Home > Design > Custom Css

@media only screen and (max-width: 767px) {
	#block-6362fc605a58d739a1e4cebc.sqs-background-enabled.sqs-block-html {
		background: blue;
		* {
			color: #fff !important;
		}
	}
	#block-6362fc60ca51a6f492817c66.sqs-background-enabled.sqs-block-html {
		background: blue;
		* {
			color: #fff !important;
		}
	}
}

Hope it works properly on your site

This code worked perfectly, thank you so much!!