This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Vantage: Make image above menu responsive

Open 3 replies technicalthemetheme-vantage
George Glazer
6 years ago · Last reply by Andrew Misplon 6 years ago

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

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

3
  1. Andrew Misplon Staff 6 years, 2 months ago

    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:

    max-width: 100%;
height: auto;

    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/.

  2. George Glazer 6 years, 1 month ago

    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

  3. Andrew Misplon Staff 6 years, 1 month ago

    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.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread