Preheater area (Contact Info & Social Menu) on Mobile Site

Is there a way to control the preheater area on the mobile rendering? Specifically, the margins above and below the text? And the line spacing value?

If the background color and text color could be modified in the same code insertion it would be amazing. But if separate CSS Code is required for each item it is still better than having only the default option.

I am working on

Thank you very much.

Please discard the part about color in this request for help. I found it in the Customize options, the way it should be. But I am still desirous of controlling the margins above and below the text and the line spacing factor.

The default settings make the preheater too BIG in the mobile rendering, in my humble opinion.

Thank you much!

Hello there,

If I get it correctly, you’d add this extra CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      .has-hero .header-contact {
        padding-top: 3px;
        padding-bottom: 3px;
      .has-hero .header-contact .social-links {
        margin-top: 0;