Logo doesn’t properly resize on mobile

  • Resolved Jan

    (@jandavidhauck)


    3 years, 6 months ago

    I could use some further help with my logo/header, which, after some customizations doesn’t properly resize on mobile and tablet.
    I’ve modified the size of the logo like this: 

    /* Logo */
@media screen and (min-width: 768px) {
  .site-branding .site-logo-link img {
    max-height: 110px !important;
  }
}

    I have also reduced the size of the header with this code: 

    /* Header */
.site-header {
  height: 220px !important;
}

    (this affects all pages except for the front page)

    Unfortunately, while on the front page (https://jandavidhauck.com), the logo properly resizes on mobile and tablet, on the other pages (see for example here https://jandavidhauck.com/publications-2/) the logo becomes super tiny. Also on mobile, the height of the header is too large (I presume because it forces it to be 220px?)

    See here two screenshots
    https://www.dropbox.com/s/pn29wdhsoex13em/mobile.png?dl=0

    How can I make sure that both logo size and header height get adjusted for mobile and tablet similar to how they do on the home page?

    The page I need help with: [log in to see the link]

Viewing 16 replies (of 16 total)
  • Thread Starter Jan

    (@jandavidhauck)

    If you compare the front page to inside pages, you can see the front page has a much bigger background area before you get to the navigation, so they are designed somewhat differently, too.

    I wish I knew how to do that myself, I really think I need to learn CSS.

    In any case, I’ll mark this as resolved … you’ve been more than helpful with all this ??

Viewing 16 replies (of 16 total)
  • The topic ‘Logo doesn’t properly resize on mobile’ is closed to new replies.