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