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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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.