Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 18, 2016 at 11:13 am #700572
    cd2s

    Hi,

    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: http://dev1.colorit.ch/biographies/

    Thanks so much
    Corina

    October 19, 2016 at 9:59 am #701090
    Nikko

    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 :)
    Regards,
    Nikko

    October 21, 2016 at 9:28 am #702244
    cd2s

    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,
    Corina

    October 21, 2016 at 9:49 am #702257
    Nikko

    Hi Corina,

    Glad we could help :)

    Regards,
    Nikko

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Adapt Header Size for Mobile’ is closed to new replies.