Full width color block behind text in markdown block

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. 

Hi,

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

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. 

 

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

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

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! 

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

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!

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

Here is my testing

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

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

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

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?

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

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!