Customizing width of background text color

Hello,

I am wondering how I would go about doing this to my text (see image below).

I found code that lets me use the markdown and placed this code in there:

<div style="background-color:rgba(0, 0, 0, 0.0470588); text-align:center; vertical-align: middle; padding:0px 0;">
<a href="/donate">A MISSION STATEMENT GOES HERE</a>
</div> 

This is the one that seems okay but it has no text color customizations only background and I cannot change the width of the box, only the height.

@tuanphan do you have a suggestion for this?

13 hours ago, 2729 said:

@tuanphan do you have a suggestion for this?

Can you share link to page in screenshot? We can check easier

On 4/15/2021 at 10:49 AM, tuanphan said:

Can you share link to page in screenshot? We can check easier

I haven't implemented yet on a main page as i saw this somewhere else and wanted to see if i could do it.

This is where i was playing with it but not sure if you can access: https://marlin-bassoon-7b2w.squarespace.com/headers (pw:2729) and its at the bottom with the headers where it says mission statement goes here.

Basically I wanted to do it on our homepage title and shift it down so that it kinda overlapped the image which would be here: https://www.twentyseventwentynine.com/ pw: 2729

20 minutes ago, 2729 said:

I haven't implemented yet on a main page as i saw this somewhere else and wanted to see if i could do it.

This is where i was playing with it but not sure if you can access: https://marlin-bassoon-7b2w.squarespace.com/headers (pw:2729) and its at the bottom with the headers where it says mission statement goes here.

Basically I wanted to do it on our homepage title and shift it down so that it kinda overlapped the image which would be here: https://www.twentyseventwentynine.com/ pw: 2729

 

To increase width, add this to Design > Custom CSS

/* dropdown width */
[data-section-id="6076f904b08cc82fb922e617"] .content {
    width: 75% !important;
}

On 4/20/2021 at 10:28 PM, tuanphan said:

To increase width, add this to Design > Custom CSS

/* dropdown width */
[data-section-id="6076f904b08cc82fb922e617"] .content {
    width: 75% !important;
}

 

I tried to use this (i made a placeholder header in that same section as shown in the image, but it controls everything in that block.

I need to target the blocks individually but when i add the two separate markdowns they join together if there is no spacer between them so I am unsure how to get the separation between the first and second lines. Also then being able to change the width and move it down to be over the image slightly (as shown in the screenshots below. The placeholder text one is what is on the website and the artisan text image is what i am trying to accomplish).