Responsive Header Text

  • Resolved dorianstevens

    (@dorianstevens)


    9 years, 11 months ago

    Hello WordPress Community folks, I’m having an issue and I’m wondering if anyone with knowledge of responsiveness can help. I’m working on a website for an organization and I cannot get the header title of this theme to be responsive. Every time I view the site from a mobile or something smaller than a average sized tablet the text breaks and stacks on top of one another. I tried going into the custom css and using em’s but it still doesn’t work. the site is

    https://ai.dorianlatelle.com

    Any help would be appreciated, thanks!

Viewing 7 replies - 1 through 7 (of 7 total)

  • When you say you went into the custom CSS, did you also use a media query for smaller screen sizes?

    The current code for that header link shows:

    @media (max-width: 600px)
.no-fittext #site-title a {
  font-size: 60px !important;
}

    Try copying that code and changing the max-width to 380px while also reducing the font-size. Viewing on mobile should improve. You may also want to adjust the other screen size to something larger than 600px for tablet viewing on horizontal.

    shoudnt you be resizing them? or reducing size of fonts or something?

    just a recommendation, didnt worked much with responsivness.

    Thread Starter dorianstevens

    (@dorianstevens)

    jamesbr, I just tried that and it still didn’t work.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Looks like a small problem with that code, try this instead:

    @media screen and (max-width: 600px) {
    .no-fittext #site-title a {
        font-size: 60px !important;
    }
}

    [Code updated]

    Thread Starter dorianstevens

    (@dorianstevens)

    Thank you james and Andrew it works. So are there different @media’s for different device sizes?

    Thread Starter dorianstevens

    (@dorianstevens)

    Thank you guys!

    Yes, you can customize CSS for different screen sizes. You would change max-width, min-width, or define both depending on your needs.

    A helpful tool is Screenfly because you can preview your website in different screen dimensions across mobile, tablet, and desktop.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Responsive Header Text’ is closed to new replies.