Troubles with font in the header

  • Hi there!
    I use the customizr template for my site and I have big problems with the header. When the screen gets bigger (iMac 27 inches) or smaller (iphone/ipad) then the font of the header is displaced. Here are some pics:
    Picture_1
    Picture_2
    Picture_3
    Picture_4

    Perhaps you could just have a short look at the site:
    sundermannschule . de

    Thanks a lot for your help in advance!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter Alrox

    (@alrox)

    Does anybody have an idea how to fix it?

    You have:

    .inside.site-description {
    margin: -6% 40% 0 0;
}

    in your CSS. The -6% (the margin-top) is a percentage of the width of the window, not the height (I know, I know, CSS, what were they thinking etc etc). So the wider the screen, the higher the negative margin gets, until it eventually goes off screen.

    Take that out, or set a px value, and it will fix it.

    Thread Starter Alrox

    (@alrox)

    @electricfeet
    Thanks a lot!!
    Unfortunately the problem is still there. I’ve changed % into px but nothing really happens. The title of the site is still moving when the screen gets bigger or smaller :o(
    Anybody some other ideas?
    Thanks!!

    It’s still there. You need to clear the cache in your cache plugin.

    Thread Starter Alrox

    (@alrox)

    I’ve done it. Caches are empty now.
    I think you can see now what I mean.

    Thread Starter Alrox

    (@alrox)

    Tried to adjust margin top settings but unfortunately without any success. The title is still moving around when the screen gets larger or smaller ??
    Any other ideas?
    Thanks!

    Thread Starter Alrox

    (@alrox)

    Anybody perhaps some ideas?
    Thanks!!

    OK, you can use a Developer Tool to test the view in different viewports. I like to use Resizer which helps you track down issues with @media.

    You need to understand about @media, so try this snippet.

    Thread Starter Alrox

    (@alrox)

    Unfortunately nothing works for me. Anybody another idea?
    Thanks a lot!!!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Troubles with font in the header’ is closed to new replies.