I hope some can give me a hand here.
I am working on a new site and run into a problem.
I have an image that is set as background of a div. As I shrink the screen, image size changes, but, by the time I get to a mobile phone screen size, it stops shrinking and I only see part of image.
Here is site:
image in question is in header (two person at the table with champagne).
I tried to set div height to auto and set width to 100%, no luck.
I have a feeling something outside of this particular div settings is causing the issue.
I am a software engineer, but not an expert on front-end. This particular design was not done by me, but I have to fix it.
The site looks as though it is Wordpress if I am not mistaken?
I do not have a great deal of experience with WordPress, try finding the page with the image, select image and there should be an checkbox option to select something like make responsive.
No need to try and over-ride the default settings.
Yes, it is Wordpress, but this theme is not well supported. I have to do code changes to fix it.
It is supposed to be responsive and it works as screen size changes, but this particular image is not behaving the way it should.
I certainly don’t envy your having this task. Though most of the warning level errors are “type attribute uneccessary”, the id errors are important to fix.
What I find scary is the number of JavaScript files.
The page having 85 script requests and 23 CSS requests isn’t going to make troubleshooting easier.
I guess there a couple of ways to go about solving the problem.
Use the browser dev tools console to see if there are any JavaScript errors, and to look at what CSS rules are affecting the style. Then maybe edit the files that are responsible.
Temporarily disable all plugins to see if the problem exists for the theme without them. Then gradually re-enable them until you can determine which plugin is responsible for the problem.