[SOLVED] Mobile Custom Header Resizing

i wonder why my <b> doesn’t work :v is strong the new industry standard?

It should be noted that I did not actually ‘resize’ the header image, rather resize it’s container but left the image centered, so that resizing of the window allowed the logo in the center to stay in the center. If anybody would like to know how to actually resize the header image itself, I could figure that out.

Hi there,
I have a problem with custom header resizing and maybe you can help. It looks great on PC but on mobile it shrinks. I’ve searched and searched but nothing ?? All i have found is when the image is too big, but no word about the image being too small…

my address is lilioweprojekty.pl

Hi there,

Thanks for writing in,

I’ve seen the problem and If we’re not wrong then are you asking to increase the header banner size when it goes on mobile mode so it looks more prominent for viewers.

It’s basically your image is too big but meantime I’ve managed some way to make it look bigger.

You can go to: Appearance > Theme Options > Custom CSS and put the following code:

@media only screen and (max-width: 768px)
#logo-image {
  float: none!important;
  margin: 10px 0!important;
  min-width: 138% !important;
  display: inline-block;
}

Hope this helps,
Thanks.

Hi,
thank you for your help. I know the image is too big for a logo, but I couldn’t get it to work with header image either. With header image the mobile version crops the image on both sides, so I figured it’s better to have the entire picture but small, rather than just a piece big.

Hi there,

In order to attain big image into mobile mode you may design another bigger image for mobile version so you can use couple for two different sizes.

Thanks.

Hi,

I would love to prepare a bigger version for mobile mode, but a) I don’t know how big it should be, and b) even if I have it ready, I don’t know how to insert it. I’m totally new to wordpress..

Hi there,

If you’re having bigger image for the mobile version please provide us and I will put it in to make it look more prominent.

Thanks.

Hi,
how big the image for mobile version should be? Right now I’m using 1200×170. You said it yourself that my image is too big for a logo, and that’s why it shows poorly on mobile version. I’m confused, sorry! ??

Hi there,

Thanks for writing in,

It can be 960×114. But I misunderstood before that you were having the smaller image even before with you. I tried to make image bigger by manually putting CSS code but here your style.css file is not running on your website.

https://prntscr.com/71cma5

Thanks.

Hi,
the image should be 960×114? How does it work, if the entire page is 1200? Also, what do you mean my site is not running styles.css. It does have this file..

Hi there,

Thanks for writing in,

It could be some problem into the server that time when I tried to approach your styling of website.

In order to make your current image should look bigger and better on mobile devices so you may can avail that with this given CSS code down below:

@media only screen and (max-width: 768px)
#logo-image {
  width: 960px !important;
  max-width: 133%;
}

By this given code you can get a better look on smart devices of your header image. In contrast you can have a look something like this.

https://prntscr.com/73xuwt

However with certain given code you can get a look like this more prominent looking.

https://prntscr.com/73xv8w

Thanks.

I was updating my website today. Now out of nowhere my horizontal logo for header is not the same size and partial blue is showing from behind…?

Hi EUTS,

Please open your own thread and do not post in a resolved thread.
Your question might never be read in a resolved thread, since users mostly don’t click on it.

You also need to post your website url, so that users here can see it and provide a possible solution.

Thanks!

Hi there,

I tried editing the php file with the 100% fix described above. I got an error message telling me there was an unexpected ‘ ‘ in line 14 – this line:

‘default-image’ => ”,

I checked the code and that’s exactly how it appears in the original template.

Any suggestions gratefully received.

Thanks.