Background color change impacts padding on HEADING

Since that is a commercial theme, we ask that you please go to their official support channel, so you can get support from the people who know it best: https://buildmybrandid.com/product-support/

Forum volunteers do not have access to commercial products, so they would not know why it is not working correctly. Other community members who may have faced your issue might be able to help you, but your best bet is your product’s developer. We encourage you to use the official support venues, as it allows the developers to be aware of issues with their code and gives back to the community in a more robust way.

Hi @debfield,

Good Day!

I’m here to help. You can try the following steps:

Note: This change will take effect on the heading that has a blue background.

.wp-elements-57f8306538f61b35391f9f783de66131 {
     padding: 0 !important;
     background: none !important;
     color: #00afb8 !important;
 }

• Paste the CSS code into the Additional CSS field.
• Click Publish.
• Now preview your website using your mobile phone. You should see the results that you needed.
• Lastly, you can delete the heading at the top with no color background.

Hope this resolves the issue.

Thank you.

I have reached out to the commercial owner however thought this might be something simple to resolve with additional CSS.
Thanks

Thank so much Jerry!! LEGEND!!

It worked, although i did want blue background and white writing so add the following code successfully!!

.wp-elements-57f8306538f61b35391f9f783de66131 {
padding: 0 !important;
background: #00afb8 !important;
color: #ffffff !important;
}

The problem i now have is… i would like the block to be full width on the mobile and desktop, but this reverts back to the original problem.
Additionally, i would like ‘some’ padding so the words on the mobile view are not squashed against the blue box….

Is this too much to fix?

I have updated the CSS code and tested it.
Here is the updated CSS code. Just replace the previous code and change it to this.

.wp-elements-57f8306538f61b35391f9f783de66131 {
? ? ?background: #00afb8 !important;
? ? ?color: #fff !important;
? ? ?margin-left: calc( -100vw / 2 + 100% / 2);
? ? ?margin-right: calc( -100vw / 2 + 100% / 2);
? ? ?max-width: 100vw;
? ? ?padding: 0.5em 0.375em !important;
?}

Here is what looks like on my end.
Desktop: https://prnt.sc/E66yc-ORPlSp
Mobile: https://prnt.sc/M-O-Ykx5-Kxu

Thanks.

Jerry, thank you so so much!! You really are a legend!!
It worked AND it looks just how i want it.
Thank you…xxx

One last questions Jerry… why does me changing the size of the font from 50 to 46 stuff this up?

Deb

To change the value of the heading’s font size, Just add this code at the bottom of padding: 0.5em 0.375em !important;

font-size: 46px !important;

Here is the CSS code looks like.

.wp-elements-57f8306538f61b35391f9f783de66131 {
     background: #00afb8 !important;
     color: #fff !important;
     margin-left: calc( -100vw / 2 + 100% / 2);
     margin-right: calc( -100vw / 2 + 100% / 2);
     max-width: 100vw;
     padding: 0.5em 0.375em !important;
     font-size: 46px !important;
}

We can also adjust the font size on mobile devices. Just add this code on your Additional CSS field.

/* Font size for mobile devices */
 @media only screen and ( max-width: 768px ){

     .wp-elements-57f8306538f61b35391f9f783de66131 {
          font-size: 40px !important;
      }
      
}

Thanks

Wow Jerry! You are impressive… thank you! It works like a dream!
I am very grateful and super amazed at how you know all this.
I guess it is your super power!!
Cheers Deb

Something weird happened! When i changed a word in the block of text, it went back to its terrible formatting!! Yikes!!

Is this related to the element number?

I’m delighted to hear that you found my assistance helpful! We’re here whenever you need help or have questions. If there’s anything else you’d like assistance with, feel free to post a topic in this forum. We’re happy to help. Cheers!

Best regards,
Jerry

PS – did you see the issue above?.. something went out of wack when i changed a word in the block

.has-colortwo-background-color {
     background: #00afb8 !important;
     color: #fff !important;
     margin-left: calc( -100vw / 2 + 100% / 2);
     margin-right: calc( -100vw / 2 + 100% / 2);
     max-width: 100vw;
     padding: 0.5em 0.375em !important;
     font-size: 46px !important;
}

/* Font size for mobile devices */
 @media only screen and ( max-width: 768px ){

     .has-colortwo-background-color {
          font-size: 40px !important;
      }

}

Try this updated CSS code. Replaced the old CSS code and use the new CSS code above.

Note: Instead of this “.wp-elements-17c692c8e97afb44b2f234a07a038437”, I have changed it to “.has-colortwo-background-color” as it still works the same but much accurate to the heading element.

• This reply was modified 1 year, 2 months ago by Alor UX.

I fixed it myself using the correct NEW number of the element!! Woot!