Twenty Thirteen Theme Responsive not Fitting Mobile

  • Hi,

    Here is my blog: https://www.dominionofale.com

    When I view the blog on a mobile device (iphone) there is a grey margin on the right hand side – the theme (and the header) doesn’t fit the screen.

    Can anyone offer advice why this happens and explain clearly how to resolve it?

    Many thanks in advance,

    Scott

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

  • seems to be caused by the large font-size in your custom style:

    #masthead .home-link .site-title {
       font-family: Lora;
       text-align: center;
       font-weight: bolder;
       font-size: 70px;
    }

    try to add a @media query to reduce that size when shown in small screens.

    Thread Starter scott1978

    (@scott1978)

    Thanks alchymyth,

    I suspected it may have something to do with the header and I’ve come across the @media solution in previous threads.

    I’ve never used a @media query before. Where exactly do I add this code to have the desired affect on the header?

    Thanks,

    Scott

    try:

    @media (max-width: 359px) {
#masthead .home-link .site-title {
       font-size: 55px;
    }
}
    Thread Starter scott1978

    (@scott1978)

    Thanks alchymyth – much appreciated.

    Regards,

    Scott

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Twenty Thirteen Theme Responsive not Fitting Mobile’ is closed to new replies.