Hi There,
It is not possible to change the header image in only mobile device but to keep the header image please use the following steps, so that image will be responsive in mobile device also. We hope you understand.
Go to Dashboard=> Appearance=> Widget=> Banner Wide=> Then put the Text Widget inside the banner wide widget=> After that please use the image URL inside the content but use the image URL like this
<img src=”Image URL here”/>
Then save it.
Thanks
Thanks, this has helped quite a bit. There are a few more tweaks I’d like to make to the image though. When I added the image to the text widget as you described it caused the image to become left justified when viewed in a desktop browser. How can I get it right justified again?
I’m also using an image that’s only 940×243 in size. I already set up a Custom CSS plugin to include the following CSS to display the image properly on the desktop:
#fr-banner {
min-height:283px;
background-color:#FFFFFF;
background-position: center;
background-repeat: no-repeat;
margin: 0px;
}
When I view the site on my iPhone now it shows the scaled image, but it also shows a lot of space below the image and above the page text. I also see the space if I view the site in Chrome on a desktop and resize the browser very narrowly. How can I get rid of that unwanted space?
The site is http://www.tailsofboston.com
Thanks again!
-Bruce
Hi Bruce,
You can use the following css to fix your issue;
#fr-banner {
min-height: auto;
}
NOTE: Please use the child theme style.css or custom css plugin to write the css.
Thanks
This seems to fix it when I view the site in a desktop browser, but it has the exact opposite behavior when viewed on my iPhone. The image area is so large that the text is pushed beyond the bottom of the screen…
Hi There,
Could you please write the css like below, if this is not helpful to you, then please let us know.
#fr-banner {
min-height: auto !important;
}
Thanks
Thanks for the suggestion. Unfortunately it’s still not working. If you go to http://www.tailsofboston.com in an iPhone you’ll see the image at the top, a full screen filled in with the background color of the image, and then the text doesn’t start until below the bottom of the page.
Hello brucepennypacker,
Could you please write the css like below, if this is not helpful to you, then please let us know.
#fr-banner {
min-height: inherit !important;
}
Thanks
This got it working properly. Thanks for all the help, and for such a simple yet elegant theme!
