Any way to resize header on mobile?


#1

Hi,

Is there any way to change the header on mobile? At the moment, there is text on the header that needs to be seen but is showing far too small on the mobile. Is there a way to make the header bigger / zoomed? Or perhaps upload a different header to the mobile site?

Thanks in advance,
CEG


#2

Hi,

Please post a link to your website, so I can give you a working Custom CSS to change the size of the header text on mobile.

Best Regards,
Csaba


#3

Hi Csaba,

www.balance-golf.com is the site.
It’s the whole header area actually - the text is ‘set’ on the image as I created one image from scratch and uploaded to the header area. Perhaps there is a way to enlarge the image for mobile only, or upload a separate header image?

Thank you again,

CEG


#4

Hi,

Still my struggling with this! – It’s the last hurdle until I can complete this project, so any help would be great.
To reiterate, the issue is that the header is too small to see any text when viewed on mobile. Is there a way to make this bigger or upload a separate header for mobile device?

Thanks in advance

CEG


#5

Hi,

Do you mean to change the header image which contains your contact info, but just change it on mobile to an other image? If yes, please post a link to the other image, to the one you want to change it on mobile.

Best Regards,
Csaba


#6

Hello Csaba,

Yes - that’s exactly what I mean; keep the header as it is on the desktop site but change it on mobile to this image: http://cluster3.website-staging.uk/balance-golf.com/wp-content/uploads/2016/08/first-try-1.png

Thank you,

CEG


#7

Hi Csaba,

Any news on this topic?
I’m super grateful for your expert knowledge here on this forum :slight_smile:

Thanks again,
CEG


#8

Hi,

Ok, you can change the header image on mobile only with this Custom CSS:

@media only screen and (max-width: 768px) {
.header-image {
    background-image: url("http://cluster3.website-staging.uk/balance-golf.com/wp-content/uploads/2016/08/first-try-1.png") !important;
}
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba


#9

Hi Csaba,

Thanks for getting back to me - I think we’re on the right path here. I’ve tried the code and it works… sort of, haha!
Two issues:

  1. It doesn’t display the whole image (the top is cut off, where the “BALANCE” logo should be.
  2. The desktop header (the one that shows text too small on mobile) is still there… over the top of the new mobile header.
    See attached image for a better idea.

Kind regards,
CEG


#10

Hi,

How I see you have removed the Custom CSS I gave you, please re-add it, so I can check what is causing the issue.

Best Regards,
Csaba


#11

Hi Csaba,

Yes, I had to remove it as the site was live and it looked very odd as it was. I think, as there isn’t a guaranteed fix in sight - I will leave it as it is considering it’s live now on mobile and I don’t want to mess around with it. However, if my client wants to change it in the future, I’ll come back for your help! Thanks again!


#12

Hi,

Ok, if you will need help with this please activate maintenance mode and give me admin access to your site in email, so I will be able to check this issue on your site.

Have a nice day!

Best Regards,
Csaba