Jump to content

Text Box Background Color and Blur on Mobile

Go to solution Solved by Lesum,

Recommended Posts

@TigerLily67 The site is private. You have to publish the site with a password.

Also, create a text block similar to how you described. Then, I can provide a custom code solution to display that text block only on mobile.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

@TigerLily67 Sorry, I didn't explain properly. You need to create two text blocks, one with a background (for the mobile version) and another without a background. Then, with custom code, I'll change it so that the one without a background is visible only on desktop, and the one with a background is visible only on mobile. Just make a duplicate of the text box you have right now and remove its background, which we'll display on desktop.

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
  • Solution

@TigerLily67 Add this code under Website > Pages > Website Tools > Custom CSS

// text block for mobile hide on desktop
@media screen and (min-width: 768px) {
	.fe-block-270c1c9e6080aa2c3621 {
		display: none !important;
	}
}

// text block for desktop hide on mobile
@media screen and (max-width: 767px) {
	.fe-block-d76286978c2c65f9e336 {
		display: none !important;
	}
}

You can adjust the position of the text block in Squarespace editor. 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.