Jump to content

Remove image background on mobile ONLY

Recommended Posts

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

new overlay on mobile.png

Screenshot 2022-11-10 at 13.14.11.png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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. 

Link to comment
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;
  }
}

Link to comment
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;
  }
}

 

Screenshot 2022-11-11 at 21.49.54.png

Link to comment

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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!!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.