Lucia_ Posted November 10, 2022 Share Posted November 10, 2022 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 Link to comment
Beyondspace Posted November 10, 2022 Share Posted November 10, 2022 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 Lucia_ 1 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, Lightbox Studio pluginIf 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
Lucia_ Posted November 10, 2022 Author Share Posted November 10, 2022 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. Beyondspace 1 Link to comment
Lucia_ Posted November 11, 2022 Author Share Posted November 11, 2022 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
Lucia_ Posted November 11, 2022 Author Share Posted November 11, 2022 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; } } Link to comment
Beyondspace Posted November 14, 2022 Share Posted November 14, 2022 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, Lightbox Studio pluginIf 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
Beyondspace Posted November 16, 2022 Share Posted November 16, 2022 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 Lucia_ 1 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, Lightbox Studio pluginIf 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
Lucia_ Posted November 16, 2022 Author Share Posted November 16, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment