Header image cuts off on mobile

this is what it looks like.

Thank you for this hint. It seems retrogeek pulls full sized image even if on mobile. I will check this and try to fix it as soon as possible.

Meanwhile please try to change in header.php:

if ( has_custom_logo() ) {
	$rg_custom_logo_id = get_theme_mod( 'custom_logo' );
	$rg_image          = wp_get_attachment_image_src( $rg_custom_logo_id, 'full' );
	echo '<img src=' . esc_url( $rg_image[0] ) . ' class="custom-logo" alt="' . esc_attr( get_bloginfo( 'name' ) ) . '">';

Try to change ‘full’ to either ‘large’ or ‘medium’ and see if it works on mobile please.

Hey, thanks for the reply!

I tried to change it to “large” or “medium”, but it didn’t seem to change anything

Also, while I have your attention ??

I’m trying to get the menu to align to center instead of left – so far, I couldn’t figure it out…

To center the menu you have to add the following css

for class main-nav add text-align:center

for <ul id=”menu-testing-menu”> add display:inline-block and text-align:left

This should do the trick.

Okay in header.php find:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" 
srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" 
width="<?php echo esc_attr( get_custom_header()->width ); ?>" 
height="<?php echo esc_attr( get_custom_header()->height ); ?>" 
alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
>
</a>

delete the two lines starting with width and height.

I have just tested this and it works on my site.

Will do theme testing now and publish it.

It would be great to have a feedback from you.

Thanks.

• This reply was modified 10 months, 2 weeks ago by tuxlog.

Thanks for getting back to me!

This works very well up to a screen size of about 600px, like this:

Any smaller, like on my iPhone, it does this:

Anything else I could do?

Also, sorry, I could not find:

<ul id=”menu-testing-menu”>

In the style.css, or anywhere else. Where do I have to look?

Thanks again!

For the CSS part just add:

#menu-testing-menu { display:inline-block;text-align:left;}

to your custom css or style.css. This should work.

I will have a look at the header thing later.

Hello again,

I just uploaded a new release 0.7 which should show the header image more reponsive. I tested it on iphone and android. Please remember the size of the image used depends on the screen width and on the available image sizes in your WordPress setup. But we will check this if you have updateed to 0.7.