Relevant Site: http://RVInspector.pro/
I am using Wordpress Theme, 2017 and I think that some, though not all, of the issues I have been having may pertain specifically to that theme.
I have tried, with limited success to make this site responsive, as pertains to header images.
For the time being, I am using a PHP solution, but that solution goes away, as soon as the page is loaded.
What I mean by that is, if the visitor turns his device to a different orientation, after the page loads, whatever the PHP loaded will continue to display.
Since PHP ends at page load, I need a CSS solution, that will continue to be active after page load.
But every CSS solution I have tried completely failed to replace the header image.
I want one header image for desktops and laptops, a second header image for mobile devices in portrait orientation, and a third image for mobile devices in landscape orientation.
Moreover, the image should change, as orientation of the device changes, including after the page has loaded.
The images are:
- Main Header: http://rvinspector.pro/wp-content/uploads/2019/03/rv-inspector-motorhome-header.jpg
- Mobile Portrait: http://rvinspector.pro/wp-content/uploads/2019/03/rv-inspector-motorhome-mheader-2.jpg
- Mobile Landscape: yet to be designed
For the record, the PHP solution I am currently using is as follows:
/** Partial Fix for mobile header. */ function custom_header_image_tag( $html, $header, $attr ) {
if(strstr($_SERVER['HTTP_USER_AGENT'],'Android') || strstr($_SERVER['HTTP_USER_AGENT'],'webOS') || strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad') || strstr($_SERVER['HTTP_USER_AGENT'],'Windows Phone') || wp_is_mobile()){
$html = "<img src=\"http://rvinspector.pro/wp-content/uploads/2019/03/rv-inspector-motorhome-mheader-2.jpg\"></img>";
}
return $html; } add_filter( 'get_header_image_tag', 'custom_header_image_tag', 10, 3);
The above works only for initial page load. It also adversely affects the size of images further down the page, on some devices in landscape orientation.
I have also tried several variations on:
@media screen and (max-width: 48em) { ... }
My purpose is to keep all of the stylized text, seen in the images, in the center of the screen and at a readable size.
