Header image disappears on phones and tablets

  • Hi there
    I’m using twenty thirteen theme for my blog. I had a logo designed for the blog which I have inserted in the header section.
    It looks great on desktops but on my iphone and some tablets only the very top of the logo shows. I had expected the theme and header to be responsive.
    My blog can be found at https://www.hellohomebird.com
    At the moment I have to apologise to people explaining that my blog doesn’t look right on phones and request they look it up on a desktop – not ideal!
    I am not au fait with anything technical – I’m just a lifestyle blogger – so coding or anything technical is very scary! Any easy fixes for this? I just want my homepage to look the same on mobiles as it does on the PC.
    Thanks in advance!
    Gail
    https://www.hellohomebird.com

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

  • Hi,

    Add this code in style.css (code has adjusted for iPhone5).

    @media (max-width: 220px)
{
.site-header .home-link
{padding: 0 20px 55px;}
}

    You can also add this code for various screen sizes.

    Thanks,

    Thread Starter hellohomebird.com

    (@hellohomebirdcom)

    Hi,
    Thanks for getting back to me so quickly. I’ll give it a try and let you know how I got on.
    Gail

    Thread Starter hellohomebird.com

    (@hellohomebirdcom)

    Hi again
    I need more help if possible! I’ve no idea where or how to add this code!!
    I tried going to a website address using my blog address followed by my theme and /style.css and saw a long page of code. I tried to paste in your code around section 4 which deals with the header but it seems to be a read only file and I couldn’t get the cursor to appear.
    Could you send me a step by step guide for dummies?
    I’m totally new to this but would be so pleased to fix this problem.
    Can I access style.css from a dashbooard button or do I need a website address like the one I described above?
    Any guidance greatly appreciated!
    Gail
    https://www.hellohomebird.com

    Thread Starter hellohomebird.com

    (@hellohomebirdcom)

    Another wee update, after reading some forums I pasted the code into a text widget and pressed save and publish. This didnt work – the code ended up appearing at the foot of my home page! So I’m stuck! ??

    Hi,

    Access your WordPress directory either through cPanel or FTP.

    Navigate to following file and edit it through cPanel file manager.

    hellohomebird.com/wp/wp-content/themes/twentythirteen/style.css

    Paste following code and save the file.

    @media (max-width: 220px)
{
.site-header .home-link
{padding: 0 20px 55px;}
}

    Browse your website in mobile screens to verify it.
    >>Make sure you take necessary backups before making any changes.

    Thanks,

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Header image disappears on phones and tablets’ is closed to new replies.