Header Image not responsive

[Anonymous]

Hi

I have different images in the header of the index page and other pages on the Pure and Simple theme, but the image reduces in width but keeps the same height when viewed on different platforms, I’ve tried taking 100% off the height but the header doesn’t fit then, could you tell me how to fix this please.

Thanks

[Binaya D]

Hi Dominic,

Could you please mention the link of your site also, so that it will be easy to both of us to find the solution asap. But if you have kept the header image as background image then please remove it and please follow the following steps:

Go to Dashboard => Appearance => Widgets => Banner => Keep the text widget inside the banner widget and keep the image like this

=> Then save it

We hope this will be helpful to you, if not then please let us know.

Thanks

[Anonymous]

Hi

Sorry here is the link http://www.shamblestochic.com.au/Test/

[Binaya D]

Hi Dominic,

We visit your site and it seems that both image are responsive, so could you please check once.

NOTE: It seems that you are using the outdated version of the theme, so we request you to update your theme and please make a backup before you processed.

Thanks

[Anonymous]

Hi

Thanks for your answer, the ‘Banner’ is responsive but it’s the ‘Header’ that gets squashed, please see attached

Thanks
Squashed-Header.jpg

Attachments:

You must be logged in to view attached files.

[Binaya D]

Hi Dominic,

As it is background image it is responsive, due to the responsiveness the image has been compressed and if you remove the responsiveness then your image can be cut off in mobile and tablets. And we have kept the code like this to make it responsive

.header-bg {
    background-size: 100% 100%;
}

And if you reduce or remove the code then you image looks like the attached image. We hope you understand.

Thanks

Services.png

Attachments:

You must be logged in to view attached files.

[Anonymous]

Thanks

I’ll have a re-think, thanks for your help

[Binaya D]

Hi Dominic,

You’re welcome! 🙂 Feel free to send us your queries whenever you need help. Have a nice day!

Thanks

[John Maberry]

I have the same or a similar problem with the header being responsive in width but not in height. That’s not really responsive. I know this can be fixed because I have another blog site using the WordPress 2014 theme and the header is responsive both in height and width. The image should not wind up cut up like your illustration nor squished like Dominic’s. here is a link to my 2014 theme site illustrating how the header background should work. Resize the screen and you will see this. Please fix this in Pure & Simple.

[Binaya D]

Hi John,

It seems that you haven’t check it well in WordPress 2014 theme that header image is not background image you can check in the attached image and you can check the image of your site also what’s the differences between there is and as per the 2014 theme you have banner image is same as header image of 2014. We hope you understand, if not then please let us know.

Thanks

http://prntscr.com/b021pn
http://prntscr.com/b022yg
http://prntscr.com/b023gq

[John Maberry]

I’m not an expert on html coding so I am having some difficulty making sense of the screenshots showing inspect element. What I did to customize the header is to upload an image on the “Customizing Header Image” menu. The image IS there but when I do a “visit site” and inspect elements I see no href to the image source. I don’t know if that’s part of the problem or not. So no, I don’t understand.

I also left an online message about deleting the container for the site title and tagline. Making it invisible/transparent could work as well. Other than that, moving it to the upper left of the header rather than the center would be great. The response I received from Madan Karki identified the theme header and logo-group.php as places to edit but didn’t explain how to do this. Can you offer any help with that?

By the way, the child theme in the download folder doesn’t have anything other than the theme functions php and the stylesheet. Child Theme Configurator produces anomalous results copying the rest to the child. Do I need to copy and load the rest into the child theme to make it possible to edit them (assuming I can learn what I am doing).

[Binaya D]

Hi John,

Could you please provide us your WP-login details of your site via mail, so that we could fix this issue. We hope you understand.

We look forward to your respond.

Thanks

Email Address: [email protected]

[Anonymous]

Hi

With regards to the Header retaining height but squashing in width, I finally solved the problem by going to ‘Site Identity’ section and in the ‘Header Height and Padding” section, put 25% 0 0 0 and the header reduces proportionally.

Hope this helps someone

[Binaya D]

Hi Dominic,

Thanks for the solution, we hope this will be helpful to other also and we really appreciated for your help.

Thanks

[John Maberry]

Wish it did, but it doesn’t work on my site. It seems to work partially, but the problem is still the integration of the container with the site title/tagline with the background image. They just don’t play nice together.

[Author]

Posts