Header is too small on a mobile device – how to make it a readable size?

[miamax]

On my site:

https://www.dwellinthegarden.com

I notice that the header shrinks on a mobile device. It looks fine on a computer, but how do I make sure that the header on a phone is large enough to see? I read the article "Responsive Sizing: Two little known CSS properties" but it is over my head.
Thank you.

[User]

@miamax

Can you please describe what you are expecting (wanting) to see on the phone, as opposed to the desktop version?

Your header appears to be a 100%w image which contains both text and background graphics, so it fits both phones and desktops the same —as a 100%w responsive png image.

The WP Responsive features change (scales) text and/or images to match the screen size.  In your case, you only have a png image, but no ‘responsive text’, as the text is contained wholly within the image.

If the header is text, you will be able to get what I think you seek.  However, matching up the graphic underline (and its decorative flourish on the right)  as either text or image, may be an issue.

Regards!

 

 

 

 

 

 

[scrambler]

@User explained it perfectly.

T o get the text to not scale with the image so it remains bigger on mobile the text would normally be done using the Site Title and the Site Tagline.

However as @User mentioned that would make the graphic underline not match as the mage scales while the text remains larger.

There maybe another way to get what you want using two images.

One image with just the textured of the flowers used as the Header image.

A second image with the text and graphic underline used as the WordPress Sitelogo image, and that logo image set to replace the Site Title.

Because that image will be less wide than the header image, it will not scale as quickly, and we may be able to control its size better and independently from the header image.

[miamax]

I understand the explanation of the responsive image, thanks for explaining that. I am leaning towards creating a separate header for phones as the solution. Could you please explain a bit more how to do that and where in Admin that would be indicated, as opposed to the “main” header seen on a computer screen?

 

I was reading this forum post:

https://forum.weavertheme.com/forums/topic/improvements-for-phone-headers-appearance-speed/

and I like the way this person’s phone header is larger and a bit different than his computer header.

[scrambler]

Unfortunately there is no built in way to have a different header for desktop and for mobile.

Not sure what you are speaking of with the site in the post you mention above, it is simply using a regular header image that is hidden on phone, and the site title and tagline above it as text.

As a built in option, the easiest way would be the method I described, which is have a header image for the background only, and an image with the text and graphic underline set as the site logo with the option to replace the site title with the site logo.

Now if you want a different header image on mobile and desktop, you can use the method below

Remove the current header image

Instead used the Header HTML replacement area, and put the two shortcodes below in the header HTML replacement box, to set one image on mobile and one on desktop

[show_if device=desktop] <img src="https://www.dwellinthegarden.com/wp-content/uploads/cropped-dwell-header-1.png" />[show_if]

[show_if device=mobile] <img src=URLR-for-the-mobile-image" />[show_if]

The devices you can use are desktop, mobile (tablet and phome), smalltablet, phone

[Author]

Posts