We are using Vantage on a WooCommerce site. For some reason, the image above the page wrapper and menu, which is 975 x 130 pixels, resizes for mobile devices such as a cellphone on the Category and Product pages, but not on what WooCommerce calls Pages, which are the individually-designed pages that are not WooCommerce pages per se, such as the Home Page. I would like it to behave on the Pages the same way it behaves on Category and Product Pages. Examples of these types of pages are:
Home page: https://www.georgeglazer.com
Category page: https://www.georgeglazer.com/wpmain/product-category/art-design/
Product page: https://www.georgeglazer.com/wpmain/product/advertising-art-beer-brewery-horsfall-brothers-savile-park-halifax-england-antique-print-early-20th-c/
If you are looking at them in a browser and not on a phone, and want to see what I mean, just resize the browser window width and make it narrow.
In case this is useful information, this is the code for the image on our Vantage Child: Theme Header (header.php)–
Thanks,
Helen
Hi Helen
Thanks for reaching out.
WooCommerce pages have a rule that is also targetting your header image, thereby making it responsive. Add either as an inline style or via a CSS rule the following your header image:
https://www.w3schools.com/tags/att_style.asp
or
https://www.w3schools.com/css/css_syntax.ASP
I can’t get too deep into custom development within our free support scope but it’s worth noting that <code.do_action('vantage_before_page_wrapper') is an action hook. You can use that hook to output your HTML. If there are no other changes to the header template file, you could remove the header file from your child theme and use a function instead. More on action hooks https://themeshaper.com/2009/05/25/action-hooks-wordpress-child-themes/.
Hi Andrew,
I assumed you meant add the CSS rule to the header image as an inline style in the Child Theme. So I took out the specific image dimensions (width=975, height=130) and replaced them with “max-width: 100%; height: auto;” as you suggested. At first I thought it hadn’t worked, but then I noticed the Home Page and a couple of the other non-Category/non-Product pages were working properly, and within two hours, they all seem to be loading correctly. So thanks for that!
–Helen
Hi Helen
You should be able to keep the image width and height in place but it isn’t necessary, up to you. I’m glad to hear you’ve made progress, thanks for the update :) Yes, if inserting the style declarations as an inline style tag, it would need to be done via the child theme as you’ve done.