Header image cropping wrong on mobile + titles on posts overlapping menu

Hi there,

Is there a way to get the image to look the same on mobile and iPad as on desktop? If not is there a way to choose which part gets cropped so that I can select part of the image rather than have it cropped the way it is?

The header image is added as a background image to the header area, so you can use the background-position property in CSS to modify it’s position. This will shift the image to focus on the peacock feather on mobile, for example:

@media only screen and (max-width: 640px) {
  .libretto-has-header-image #masthead {
    background-position: right;
  }
}

You can find other values you can use instead of right here:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

The second issue is that my titles are overlapping my menu and just not looking good at all since I added a header image.

Where exactly are you seeing this? I don’t see anything overlapping the menu on either desktop or mobile on your site.

Please give a link to the exact page on the site where you’re seeing this, and it would also help if you can include a screen shot. You can use a site like snipboard.io to share a screen shot here.

Can you explain what you mean by the menu “just not looking good at all”? What exactly is wrong with the menu?

Thank you so much for your reply.

The piece of CSS you have supplied is very helpful. May I just ask, that refers only to mobile screens right? How could I edit it to work for iPad screens and desktop? (So I can be precise with how it looks specifically on any format)

Here are examples of the title issue:

This is on mobile : https://snipboard.io/EOdkS6.jpg
On this page – https://thefoxandtheotter.com/

This is on mobile: https://snipboard.io/kfltpg.jpg
This is on this page but is the same for all blog posts – https://thefoxandtheotter.com/2020/07/14/thefoxandtheotter_tarot-knight-of-cups-the-spirit-of-a-romantic-dreamer/

This is on iPad : https://snipboard.io/oEMyxb.jpg
This is on this page but the same for all blog posts – https://thefoxandtheotter.com/2020/07/14/thefoxandtheotter_tarot-knight-of-cups-the-spirit-of-a-romantic-dreamer/

And also this little Link box is showing up on this page on iPad and covering the menu (what is it and is there a way to get rid of it?) : https://snipboard.io/s5bcO2.jpg
Site link – https://thefoxandtheotter.com/blog-posts/ [this is the part I meant about it not looking good]

Looking forward to hearing back from you

The piece of CSS you have supplied is very helpful. May I just ask, that refers only to mobile screens right?

This is only for mobile screens, yes, as that’s where you indicated the cropping is problematic.

How could I edit it to work for iPad screens and desktop? (So I can be precise with how it looks specifically on any format)

To target tablets, add this below the previous CSS (it is very important that the new code must go below the previous code):

@media only screen and (min-width: 641px) {
  .libretto-has-header-image #masthead {
    background-position: right;
  }
}

And for desktop, again below all previous code:

@media only screen and (min-width: 860px) {
  .libretto-has-header-image #masthead {
    background-position: right;
  }
}

Here are examples of the title issue:

I don’t see this issue on any of those links on my phone. On my phone, and in the mobile preview using the developer tools on my desktop browser, the title resizes automatically to fit into the available space, as it should. It looks like that’s not happening on your end, for some reason.

What type of mobile device and what browser are you using? If you install a different browser app on your device and view your site there, do you still see this? What about if you open your site in a private browser tab/view it as a logged out visitor?

And also this little Link box is showing up on this page on iPad and covering the menu (what is it and is there a way to get rid of it?)

That is the site logo – I see it on desktop as well. Go to the Customizer ->Site Identity, and remove the logo, and that will disappear.

This theme is designed to display a logo of only 100x100px big, and for logos it’s best to use simple PNG images. What you’ve essentially done here is to set an image designed to be a custom header, as a logo instead, and the image is bigger than what the theme is designed to use, which both contribute to it not looking very good.

Thank you for the extra two CSS pieces.

I use an iPhone and use Safari. I also downloaded chrome to see if it was different but unfortunately it is the same. For some reason it doesn’t seem to be resizing. The same when using a private browser tab. Do you know why this is the case?

Also I did what you said with the site logo but it is still showing up. Why might this be the case?

Thank you again and looking forward to hearing back

I use an iPhone and use Safari. I also downloaded chrome to see if it was different but unfortunately it is the same. For some reason it doesn’t seem to be resizing. The same when using a private browser tab. Do you know why this is the case?

I don’t have an iPhone, but I used an emulator to check how your site looks on both iOS 12 and iOS 13, and it appears it only happens on iOS 13. Can you confirm that’s what you’re using?

The fact that it happens in Safari and Chrome points to this being a system-level setting that’s overriding the site’s styling – I’m going to guess accessibility settings that prevents headings from being resized below a certain size. Can you see if you can find anything like that?

Also I did what you said with the site logo but it is still showing up. Why might this be the case?

Just to confirm, if you now go to Appearance ->Customize ->Site Identity, it doesn’t show anything under site logo?

If so, it could be this is getting cached on your site – I can see via Jetpack you have the WP-Super cache plugin installed on the site. Can you use that to clear the site’s cache and see if that helps?

Yeah I am using iOS 13.

I’m a bit unsure where I would find the accessibility settings you are speaking of?

As for the logo, yes nothing is showed under site logo as I removed it but it is still showing up.

And I went into WP-Super cache but there wasn’t actually anything cached there. I pressed delete anyway and the logo still didn’t disappear

You’ll find the Accessibility features following https://support.apple.com/guide/iphone/get-started-with-accessibility-features-iph3e2e4367/ios