Jump to content

Full width color block behind text in markdown block

Recommended Posts

Site URL: https://www.patricialindner.com/

Is there any way to add a full width color bar behind text using a markdown block? See the image below. The text (markdown block) is placed on a background. In mobile view this obviously doesn't work as the background is an image. I would like to upload an image of the flower and have the color bar behind the text so that it adjusts for mobile. Any help would be appreciated. Thanks! Password is Patricia. 

 

image.thumb.png.22b567fae4dbb2396aa062271c2f5db1.png

Link to comment
13 hours ago, JennWalker said:

Site URL: https://www.patricialindner.com/

Is there any way to add a full width color bar behind text using a markdown block? See the image below. The text (markdown block) is placed on a background. In mobile view this obviously doesn't work as the background is an image. I would like to upload an image of the flower and have the color bar behind the text so that it adjusts for mobile. Any help would be appreciated. Thanks! Password is Patricia. 

 

image.thumb.png.22b567fae4dbb2396aa062271c2f5db1.png

I've found that the background color of heading is set by the background image indeed.

Here is the image when i access is source

image.thumb.png.0cb90e6df6b00d4d7a1b738c0c2fbf7b.png

It looks like you need to find the right background image to meet your requirement

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 plugin
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, tuanphan said:

Hi,

Do you want to resize text + increase background color height?

The text right now is sitting on an image that I created and uploaded. You can ignore the  image, as it is not working for mobile. Is there a way to add a background color to text that is in a markdown box? If there is, I would just create the image without the pink bar and have text on that. I hope that makes sense! 

Link to comment
8 hours ago, bangank36 said:

I've found that the background color of heading is set by the background image indeed.

Here is the image when i access is source

image.thumb.png.0cb90e6df6b00d4d7a1b738c0c2fbf7b.png

It looks like you need to find the right background image to meet your requirement

Yes, I created this image but it does not work for mobile. So I would like to just take the pink bar out and add a background to the text so that it will adjust. I hope that makes sense! You can ignore the image, I just would like to know if you can add a colored background to text in a markdown box. Thanks!

Link to comment
9 minutes ago, JennWalker said:

The text right now is sitting on an image that I created and uploaded. You can ignore the  image, as it is not working for mobile. Is there a way to add a background color to text that is in a markdown box? If there is, I would just create the image without the pink bar and have text on that. I hope that makes sense! 

You can try adding to Home > Design > Custom Css

section[data-section-id="617ea6fd0af454239abb4af6"] .content-wrapper {
  background: purple;
  height: 10px
}

section[data-section-id="617ea6fd0af454239abb4af6"] .content {
  position: absolute;
  top:50%;
  transform: translateY(-50%);
}

Change the background color to get the color you 'd like to set

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

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 plugin
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

Here is my testing

image.thumb.png.b0cf85f5caab96ced1fba0cd95c31c2a.png

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 plugin
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
On 11/8/2021 at 7:03 PM, bangank36 said:

You can try adding to Home > Design > Custom Css

section[data-section-id="617ea6fd0af454239abb4af6"] .content-wrapper {
  background: purple;
  height: 10px
}

section[data-section-id="617ea6fd0af454239abb4af6"] .content {
  position: absolute;
  top:50%;
  transform: translateY(-50%);
}

Change the background color to get the color you 'd like to set

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Thank you, I will give this a try and let you know!! 

Link to comment
On 11/9/2021 at 9:02 PM, JennWalker said:

Thank you, I will give this a try and let you know!! 

 

On 11/8/2021 at 7:04 PM, bangank36 said:

Here is my testing

image.thumb.png.b0cf85f5caab96ced1fba0cd95c31c2a.png

Ok so it worked, however, I am having the same problem, it does not adjust for mobile. Any way to make that happen? See screenshot. Thank you!!

image.thumb.png.cd220fc902e737dcb9a623cf0b24559a.png

Link to comment
On 11/8/2021 at 7:03 PM, bangank36 said:

You can try adding to Home > Design > Custom Css

section[data-section-id="617ea6fd0af454239abb4af6"] .content-wrapper {
  background: purple;
  height: 10px
}

section[data-section-id="617ea6fd0af454239abb4af6"] .content {
  position: absolute;
  top:50%;
  transform: translateY(-50%);
}

Change the background color to get the color you 'd like to set

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Hi! Not sure if you got my other message, this worked but I am still having the same issue with it not adjusting for mobile. Do you know how to fix this?

Link to comment
2 hours ago, JennWalker said:

Hi! Not sure if you got my other message, this worked but I am still having the same issue with it not adjusting for mobile. Do you know how to fix this?

Hi @JennWalker,

You can set a breakpoint and set height in mobile, try adding this Custom Css

@media only screen and (max-width: 767px) {
  section[data-section-id="617ea6fd0af454239abb4af6"] .content-wrapper {
    height: 155px;
  }
}

Let me know how it works on you site

Press 👍 or mark this answer as solution to help another one too

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 plugin
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
15 minutes ago, bangank36 said:

Hi @JennWalker,

You can set a breakpoint and set height in mobile, try adding this Custom Css

@media only screen and (max-width: 767px) {
  section[data-section-id="617ea6fd0af454239abb4af6"] .content-wrapper {
    height: 155px;
  }
}

Let me know how it works on you site

Press 👍 or mark this answer as solution to help another one too

 

That worked perfect, 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.