Title and tagline won’t resize on mobile site

  • joshuasz

    (@joshuasz)


    6 years, 5 months ago

    My site title and tagline won’t resize when switching to a mobile site, because of this only part of the title is visible and the tagline comes below the topbar.

    I am a newbie to websites, however I am fairly certain I have gone through all the mobile customisation options and haven’t been able to change it. I am using the free version of Ascend.

    Any help or advice would be great.

Viewing 12 replies - 1 through 12 (of 12 total)
  • hannah

    (@hannahritner)

    6 years, 5 months ago

    Hi,
    Can you please provide a link?
    Thanks!

    Hannah

    Thread Starter joshuasz

    (@joshuasz)

    6 years, 5 months ago

    The website is http://veggievagabonds.com/

    If you visit the page from a computer and then a mobile phone you will see the title and tagline stay the same size and won’t fit on the topbar in the mobile site.

    Thanks

    hannah

    (@hannahritner)

    6 years, 5 months ago

    Looks like you’ve added this css:

    .kad-mobile-header-height {
    height: 52px;
}

    That is throwing your mobile header off. What is your reason for adding that?

    Hannah

    Thread Starter joshuasz

    (@joshuasz)

    6 years, 5 months ago

    Thanks Hannah,

    I didn’t realise I had added.

    If I take it out will solve the problem?

    Thread Starter joshuasz

    (@joshuasz)

    6 years, 5 months ago

    And how can I take it out? Thanks

    hannah

    (@hannahritner)

    6 years, 5 months ago

    Yes, removing should solve your problem. Appearance > Theme Options > Custom CSS.

    Hannah

    Thread Starter joshuasz

    (@joshuasz)

    6 years, 5 months ago

    Hi Hannah, there’s no coding in the CSS box but I’m still having the same issue. The title and tagline are still too big for the topbar on the mobile sites.

    hannah

    (@hannahritner)

    6 years, 5 months ago

    I’m still seeing this in your css from theme options > custom css:

    .kad-mobile-header-height {
    height: 66px;
}

    Do you see that in there?

    Hannah

    Thread Starter joshuasz

    (@joshuasz)

    6 years, 5 months ago

    in the theme options > custom css there is nothing there.

    Am I looking in the right place? From the dashboard > appearance > theme options > custom css?

    Thanks for your patience 🙂

    hannah

    (@hannahritner)

    6 years, 5 months ago

    Strange. Ok, try adding this in that place (custom css box):

    .kad-mobile-header-height {
    height: auto !important;
}

    Let me know if that works!

    Hannah

    Thread Starter joshuasz

    (@joshuasz)

    6 years, 5 months ago

    thanks, that has adjusted the height of the topbar but is there a way of lowering the font size so it doesn’t take up as much room, or removing the tagline from the mobile site? For a phone view it takes almost 1/4 of the screen.

    hannah

    (@hannahritner)

    6 years, 5 months ago

    You can remove the site tagline on mobile with this css:

    @media (max-width: 768px) {
span.kad-site-tagline {
    display: none;
}
}

    Hannah

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Title and tagline won’t resize on mobile site’ is closed to new replies.