Cannot resize opaque accent box behind text for mobile site

Site URL: https://ferret-bird-3rl2.squarespace.com

Hello forum friends ~

Trying to adjust the size of the opaque accent box on the mobile site so that the text is a bit tighter to the edges, as it is in the desktop pic.

Used this for desktop:
 

/* DESKTOP */

#block-daf805861a202b50ee14
.code-block
{
  padding-top: 2.5vh !important;
  padding-bottom: 2.5vh !important;
}
.code-block .sqs-block-content 
{
  padding-top: 2.5vh !important;
  padding-bottom: 2.5vh !important;
}

And this for mobile:
 

/* MOBILE */

@media screen and (max-width: 640px){#block-daf805861a202b50ee14 
.code-block .sqs-block-content 
{
  padding-left: 2.0vw !important;
  padding-right: 2.0vw !important;
}}

Tried various iterations and combos as well. No go.

SITE:  https://ferret-bird-3rl2.squarespace.com
ACCESS:  blahblahblah

Thank you for any tips! 

Reduce space between text - box border?

Yes, so that it fits more tightly in the space.

On the mobile site, there is a lot of space around the text and the lighter colored box behind it. I'm attempting to delete all the space from the lighter colored box behind the text (that portion in the yellow rectangles. 

No matter what I do, I can't seem to make that box any smaller on the mobile site.

THANK YOU 💗

Try this code

@media screen and (max-width:767px) {
#block-daf805861a202b50ee14 H7 {
    background-color: rgba(48,42,34,.1);
    display: block;
}
div#block-daf805861a202b50ee14 {
    background-color: unset;
}
}

(In the future, you should use h1 to h6. H7 doesn't exist)

10 hours ago, tuanphan said:

Try this code

@media screen and (max-width:767px) {
#block-daf805861a202b50ee14 H7 {
    background-color: rgba(48,42,34,.1);
    display: block;
}
div#block-daf805861a202b50ee14 {
    background-color: unset;
}
}

(In the future, you should use h1 to h6. H7 doesn't exist)

I'd like to do a Vulcan mind-meld with you.

You have literally saved my first job from being a complete disaster. 

Was only partial disaster.

Now I can't get the site title to be all on one line. It'll never end... LOL

(I actually created up to h9 - all different styles - with code blocks and CSS. You'd be proud.)

On 1/15/2022 at 8:49 AM, Poppyseeds said:

 

I'd like to do a Vulcan mind-meld with you.

You have literally saved my first job from being a complete disaster. 

Was only partial disaster.

Now I can't get the site title to be all on one line. It'll never end... LOL

 

(I actually created up to h9 - all different styles - with code blocks and CSS. You'd be proud.)

I see site title one line here, both desktop/mobile

17 hours ago, tuanphan said:

I see site title one line here, both desktop/mobile

Doesn't appear that way on all phones, but I guess some is better than none!

😁