Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #700572


    I am working on a site where I added a large header at the bottom of a color section. The header unfortunately does not resize for mobile.

    Is there a way I can make the header font responsive so it adapts to mobile screens?

    The development site is here:

    Thanks so much


    Hi Corina!

    Try to add this code in your Quick CSS (under Enfold > General Styling):

    @media only screen and (max-width:767px) {
      .page-id-16 #av_section_1 h1.av-special-heading-tag {
        font-size: 32px !important;
        padding-bottom: 40px;

    Just change the values of font-size(size of text) and padding (positioning). Hope this helps :)


    Awesome thanks so much Nikko. It only worked on the one page but it was the starting point I needed… all sorted.
    Thanks for your always amazing support. Appreciate it very much.
    Kindest Regards,


    Hi Corina,

    Glad we could help :)


Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Adapt Header Size for Mobile’ is closed to new replies.