WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Thirteen
Issue With Header Not Displaying Properly On Mobile (15 posts)

  1. franksanchez
    Member
    Posted 11 months ago #

    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:

    http://bestsanantonioautomechanic.com

    Frank

  2. tomfrom
    Member
    Posted 11 months ago #

    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)

  3. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    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 - http://codex.wordpress.org/Child_Themes

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

  4. tomfrom
    Member
    Posted 11 months ago #

    ^ also that

  5. franksanchez
    Member
    Posted 11 months ago #

    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 ;)

  6. 008Rohit
    Member
    Posted 11 months ago #

    @frank

    Yeah, exactly. :)

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

  7. tomfrom
    Member
    Posted 11 months ago #

    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;}
    }
  8. franksanchez
    Member
    Posted 11 months ago #

    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

  9. tomfrom
    Member
    Posted 11 months ago #

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

  10. 008Rohit
    Member
    Posted 11 months ago #

    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.

  11. franksanchez
    Member
    Posted 11 months ago #

    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?

    holycrosspopwarner.org

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

    i had forwarded the above domain to a empowernetwork.com 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.

  12. 008Rohit
    Member
    Posted 11 months ago #

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

  13. franksanchez
    Member
    Posted 11 months ago #

    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?

  14. 008Rohit
    Member
    Posted 11 months ago #

    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.

  15. franksanchez
    Member
    Posted 11 months ago #

    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.

    bestsanantonioautomechanic.com

Reply

You must log in to post.

About this Theme

About this Topic