Logo doesn’t properly resize on mobile

Custom CSS can make things more complicated, but I can definitely help troubleshoot issues you have without extra CSS. Can you confirm whether the logo is resizing per page even without your custom code? I wasn’t able to duplicate this on my copy of Pique.

I am able to see the header image “extra space” you’re describing, though, and was able to fix it with this:

@media (max-width: 767px) {
  #masthead {
    min-height: unset;
  }
}

• This reply was modified 3 years, 6 months ago by supernovia. Reason: typo

Thanks so much for helping out with this @supernovia!
So, I just deleted all Custom CSS, and indeed, as you suspected, the logo still doesn’t resize properly (on the non-front-pages).

The code you provide indeed fixes the header image “extra space” issue on mobile! Great.

So I deleted the code I had for the logo:

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

and replaced it with yours so the whole thing now looks like this:

@media (max-width: 767px) {
  #masthead {
    min-height: unset;
  }
}
.site-header {
  height: 220px !important;
}

Is that how it’s supposed to be?
The question remains how to prevent the logo from shrinking on non-front-pages (and ideally, making the logo 110px high again)?

Mine looks like this. I added an extra max-width bit so the logo wouldn’t run completely edge-to-edge on a smaller phone like mine.

@media (max-width: 767px) {
  #masthead {
    min-height: unset;
  }
  /* copying the front page branding */
  #masthead .site-branding {
    left: auto;
    position: relative;
    top: auto;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
  #masthead .site-branding img {
     max-width: 94%;
  }
}

Thanks so much for your help, I guess we’re almost there.
The way you have it does resolve the issue on mobile. The only thing, is that now on tablet it looks like the logo is glued all the way to the top of the screen and leaves a huge space between logo and menu.

See tablet preview of a non-front-page here:
https://www.dropbox.com/s/pmst1s4k2hmh2bm/Screen%20Shot%202021-05-28%20at%204.54.10%20PM.png?dl=0

as opposed to table preview of the front page here:
https://www.dropbox.com/s/wu6tihq4tj6qjmw/Screen%20Shot%202021-05-28%20at%204.54.03%20PM.png?dl=0
where it’s nicely centered between top and menu.

So there is still something that’s different on how it behaves on the front page as opposed to other pages… Any ideas?

Hi there,

Can you walk us through how you are adding this custom CSS to your site? Are you going here, then clicking on the CSS tab to add your code? https://jandavidhauck.com/wp-admin/customize.php

Or are you doing something different such as adding the CSS directly to your theme source code via the PHP files? The reason I ask is because it seems that the code is being included directly in your site source code (which is odd) and it is making it difficult for us to troubleshoot this issue.

i.e. it is unusual to see this when looking at your source code. Screenshot at this link: https://d.pr/i/t8LYmo

Thanks for clarifying.

Hi Jerry,
Thanks much for helping out!
Yes exactly, I’m only adding CSS via the Customizer (haven’t messed with theme files at all). So I’m not sure why it’s showing up in a way that it shouldn’t. See here:
https://www.dropbox.com/s/xcrrst23vkalhh1/Screen%20Shot%202021-05-30%20at%203.29.12%20PM.png?dl=0

I have now deleted all custom CSS, published, and then added it again and published. Did that make any difference?
Please let me know if you can think of anything I might try to do!

Hi @jandavidhauck , if the original issue isn’t happening on tablets at all, do you mind adjusting that top line to make it apply to smaller screens only?

@media (max-width: 414px) {

414 is the widest portrait-oriented device width I could find in this list. So this declaration just says “apply these rules only when the screen is narrower than this”.

Please do a test to see whether you encounter the issue on a horizontally oriented screen too. I did not see it in my testing, even on my relatively small iPhone SE.

Thanks so much @supernovia
I have done as you suggest and on my phone it looks all great –?BTW I also have the iPhone SE ??

However, on the iPad, it’s still glued to the top. I added another section with adjustments for tablet screens (I believe it’s supposed to be @media (max-width: 768px) and (min-width: 415px)
When I adjust the value for max-height: the logo does move up and down, so it does react to the height, but on the front-page it’s nicely centered between top and menu and on other pages it’s about one third to the top and an empty space between bottom of logo and menu. Any ideas?

/* Adjustments for phone screens */
@media (max-width: 414px) {
  #masthead {
    min-height: unset;
  }
  /* copying the front page branding */
  #masthead .site-branding {
    left: auto;
    position: relative;
    top: auto;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
  #masthead .site-branding img {
     max-width: 94%;
  }
}

/* Adjustments for tablet screens */
@media (max-width: 768px) and (min-width: 415px) {
  #masthead {
    min-height: unset;
    max-height: 200px !important;
  }
}

Thanks! I don’t have an iPad for testing, so just to confirm: is the logo glued to the top of the screen on an iPad even with all CSS removed?

Yes, even without any CSS it is not centered:

Compare these screenshots:

Front page:
https://www.dropbox.com/s/5qmsdzh46x882gn/Screen%20Shot%202021-06-01%20at%203.38.11%20PM.png?dl=0

Non-front page without CSS:
https://www.dropbox.com/s/2zu6zq5ft2a3npw/Screen%20Shot%202021-06-01%20at%205.28.55%20PM.png?dl=0

Non-front page with max-height at 180px:
https://www.dropbox.com/s/vktsiojhqc1sc4l/Screen%20Shot%202021-06-01%20at%203.38.03%20PM.png?dl=0

You can see that on non front pages it is dislocated to the top of the screen, no matter the header height. When I increase the header, it does move slightly down as well, but never to be fully to the center (as it does on mobile with your modifications, and as it does on normal screens without any modifications).

Ahh okay, those aren’t so much glued to the top as they are consistently positioned, so the logo doesn’t move around depending on the page. I misunderstood and thought you meant it was moving up compared to the front page.

Trying to center it based on the height of the image may get tricky, so it’s outside the scope of support we can offer here. It may also provide a bad user experience. I would recommend leaving it as it is.

Sorry we can’t help more with that.

I misunderstood and thought you meant it was moving up compared to the front page.

Thanks so much for all your help! You didn’t misunderstand. On tablets indeed it “moves up” compared to the front page. See here this screenrecording:
https://www.dropbox.com/s/ort3iukxt9kqyqd/Screen%20Recording%202021-06-03%20at%203.05.28%20PM.mov?dl=0

All I would want is for it to behave how it does on the frontpage ??
Any idea why it doesn’t?

Hi Jan,

To clarify, the level of CSS for the changes you are trying to make require a level of expertise that most support volunteers do not possess. CSS is a design language that takes many years of work and practice to master, and while we are able to help with small tweaks, the changes you are trying to make our outside of the scope of what we can support.

All I would want is for it to behave how it does on the frontpage ??
Any idea why it doesn’t?

I would say this is definitely possible, and if you were to hire a designer to help with the change you need I see no problem. It’s just more than we are able to help with I’m afraid.

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.

Thank you both so much for your help, I truly appreciate it. I’m totally new to all this, first website I’m doing, and I’ve already learned a lot!

… while we are able to help with small tweaks, the changes you are trying to make our outside of the scope of what we can support.

Yes, I totally understand – I had hoped it would have been just small tweaks, but it seems that it’s more complicated.

I would say this is definitely possible, and if you were to hire a designer to help with the change you need I see no problem. It’s just more than we are able to help with I’m afraid.

Eventually yes, once I can afford it I’d love to hire a professional designer to do the website, but for the time being, I guess I’ll live with it as it is … most people probably won’t notice the odd alignment on tablets …