How can I make a header image and Title appear on phones?

[lostinspace]

I’m trying to make my header image and a title appear when opened on a phone.  Right now iphones can only see the image in landscape and androids can’t see it at all.  I also need to have our site identified Hudson Valley Psychodrama Institute) to viewers on phones.  I have little knowledge abouts CSS., but do have experience with HTML.  Here’s a link to the site: https://hvpi.net/

Thanks for any help!

[scrambler]

There are a number of things that I am not quite sure about
How did you create the menu?

On large browser, the header image comes from a background image for the header area
On small browser (phone), there is I think custom CSS that I am not sur of the origin, that add a background image to the background image DIV
But that image has an invalid URL below
https://www.hvpi.net/wp-content/uploads/2016/12/85.png

If I replace that URL by the header image one
https://hvpi.net/wp-content/uploads/2016/10/header-img.jpg

Then the image shows up normally
But I am not sure where you have set this background image, nor why it is done that way.

As for the Site title, you have the Site title and tagline set to hidden on all devices. So if you want to see it on mobile (tablet and Phones), you will need to change the weaver hide setting for them to show on mobile and make sure it contains the text you need

[lostinspace]

How do I replace the URL in the header image as you did?

[scrambler]

I was doing that temporarily in the browser using the Browser developer tools.

But you need to find out where in the theme or plugins or WordPress settings you setup that background image.

I can’t think of a way to add a background image to the header image div with weaver options, so I am wondering if you are using a plugin that does that or Custom CSS

So check plugins and all the custom CSS boxes and see if you find the rule below where the culprit is.

#branding #header-image{
background-image: url(“http://www.hvpi.net/wp-content/uploads/2016/12/85.png”) !important;
height: 133px;
width: 100%;
background-size: contain;
background-repeat:no-repeat;
}

[scrambler]

But there may be more trouble, because the rule above supersedes another one below that is even weirder and coming for a CSS file that is not accessible. the developper tools report the error

“Content unavailable. Resource was not cached”

#branding #header-image {
background-image: url(“data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20%20%22%3E%3C/svg%3E#}http://www.hvpi.net/wp-content/uploads/2016/12/85.png”)!important;
height: 133px;
width: 100%;
background-size: contain;
background-repeat: no-repeat;
}

So you also need to check if you have any optimization plugin that would be optimizing JS and CSS. If so deactivate that as it may be breaking the CSS on your site.

[lostinspace]

Is it possible for you to recommend someone who could fix my weird CSS?  It was written years ago and it has caused problems from the get-go.  I simply don’t have any skill at all in CSS., only HTML.  You have been so helpful, but I’m bewildered by any fixes that are related to CSS.

[scrambler]

Have you checked if you have a plugin that optimizes CSS and JS?

Have you checked the theme CSS boxes in WordPress, and have you found the rules I mentioned in any them?

Theme CSS boxes can be found in the customizer (in where mode) in Customize > Custom CSS

There you find a Global Custom CSS box (top) and an Additional Custom CSS – WP settings, which is the prime targets for the rule I mentioned

Eventually paste the content of these boxes here

 

[User]

@lostinspace

As @Scrambler has mentioned above a couple of times, it looks like there are many things going on outside the Weaver Xtreme Theme, and those are probably negatively impacting your website.

This tends to make trouble-shooting difficult as we can’t know what the root issue of any problem you have at this time.

May I humbly suggest that you install a XAMPP on a home computer and on that install the latest WordPress and the latest Xtreme Theme. Then install only the plugins you need (Edit etc) which will allow you to make a dummy version of your site on the PC and get that to work and look like you need. ( https://www.apachefriends.org/download.html )

You only need the front page, a couple of posts and pages and a typical menu, together with a few photos.

When that is working and looking as you want, you can then copy back to the live site the Weaver Settings files and the CSS settings.

Plugins like the cache have no impact on the Theme or CSS settings so won’t affect the above.

From what I have seen of your site, Weaver Xtreme probably has all the features you need to get the appearance you have but selecting options, so page builders and other such plugins are probably not to be needed.

I believe that this is all well within your current skills and you will find that “customized CSS” is only needed for minor cosmetic tweaking.

Hope this helps!

[Weaver]

It agree that this is not being done by Weaver. and is most likely from some plugin. We really don’t support other plugins, nor have recommendations for other website designers.

But, one thing that should be simple for you to do is to disable other plugins, one by one to see if the problem stops. Look especially for plugins that might include custom CSS or menus or header settings in their title or description. As @scrambler noted, you can use Weaver’s options to show or hide the header background image based on site width. That would likely be the best way to handle that image when using Weaver.

[Author]

Posts