Header image cuts off on mobile

Resolved pollockj123
(@pollockj123)

2 years, 2 months ago

Hello,

I added an image header measuring 700x180px to my website. When I open it on my mobile phone, the sides get cut off.

Is there any way to make the image scale?

Thanks!

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

Viewing 10 replies - 1 through 10 (of 10 total)

Thread Starter pollockj123
(@pollockj123)

2 years, 2 months ago

this is what it looks like.
Theme Author tuxlog
(@tuxlog)

2 years, 2 months ago
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.
Thread Starter pollockj123
(@pollockj123)

2 years, 2 months ago

Hey, thanks for the reply!

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

Thread Starter pollockj123
(@pollockj123)

2 years, 2 months ago

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…

Theme Author tuxlog
(@tuxlog)

2 years, 2 months ago

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.
Theme Author tuxlog
(@tuxlog)

2 years, 2 months ago
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 2 years, 2 months ago by tuxlog.
Thread Starter pollockj123
(@pollockj123)

2 years, 2 months ago

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?

Thread Starter pollockj123
(@pollockj123)

2 years, 2 months ago

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!
Theme Author tuxlog
(@tuxlog)

2 years, 2 months ago
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.
Theme Author tuxlog
(@tuxlog)

2 years, 2 months ago

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.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Header image cuts off on mobile’ is closed to new replies.