Support » Theme: Twenty Thirteen » Issue With Header Not Displaying Properly On Mobile

  • I’m putting together a lead generation system using the new twenty thirteen theme and noticed that the header title is not shrinking down when viewed on smaller mobile devices.

    For example I use an HTC EVO smartphone and when I visit the site I created. Everything shrinks down to proper size on the screen except for the title. It appears that the font size is to large.

    I’m not to tech savvy. If any of you tech savvy peeps can help me out I’d appreciate it.

    Here’s the link:


Viewing 14 replies - 1 through 14 (of 14 total)
  • On line 2757 in style.css you will find:

    @media (max-width: 643px)
    .site-title {
    font-size: 30px;

    change the pixel value to something more suitable (15px or 20px)

    Make sure you do NOT modify any theme files – as your changes will be lost when WP is updated – changes should be made in Custom CSS (JetPack adds custom CSS so you can use that) or a child theme –

    The above code should be COPIED to custom CSS and changed there.

    ^ also that

    wow, appreciate the prompt response tech savvy dudes 😉

    just to clarify i would be changing the font-size: 30px to 15px or 20px, correct?

    thanks tomfrom and WPyogi <= dig that username 😉


    Yeah, exactly. 🙂

    The @media (max-width: 643px) part is important.

    You also need to enclose the style tag in {}

    try copying this into your new css file

    @media (max-width: 643px){
    .site-title {font-size: 20px;}

    did it on the jetpack custom css deal….worked like a charm. i wished it would shrink down and still maintain a larger font size though…thanks fellas

    it would do if you put spaces into your name, because there is no spaces it cant break down the word!

    The ‘shrinking’ doesn’t work like that.

    You can put as many @media (max-width)’s as you want and set unique font sizes for each of them.

    ok, now i see about the spacing…thanks fellas…little by little i’ll learn how to customize sites i create using wordpress.

    i created a site for a local pop warner org and wasn’t aware of that jetpack custom css function. i made changes to the theme stylesheet. could i go ahead and make those same changes with the custom css function to make sure those changes stay if there is an update?

    p.s. maybe you can help with this too:

    i had forwarded the above domain to a blog and now that domain is blocked on facebook for being spam. is there anyway i can cloak/mask/redirect that domain somehow so that it isn’t blocked on facebook? i screwed up with that empowernetwork b.s.

    i run that pop warner org’s facebook profile and page and it sucks not being able to post there domain on there about section as well as in status updates.

    Try using the short URLs maybe? Install JetPack plugin and enable short URLs.

    i’ll try that and see what happens a bit later.

    hey is there any way to simply use a solid color for the header instead of using an image?

    Yep, WP-Admin -> Appearance -> Header.

    You can choose custom background color there. Make sure you remove the header image first by clicking on a button there.

    i removed the header image but don’t see anything there about changing background color. i do see something about changing text color though

    i’m using the new twenty thirteen theme.

    also was looking at my site on my desktop and now the title is larger than the screen and appears cut off.

    i did adjust the size of the length of the header by copy/paste that code snippet from editor to custom css function and adjusted the size from 230 to 100.

    title shrinks down and displays well on my phone though.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Issue With Header Not Displaying Properly On Mobile’ is closed to new replies.