- This topic has 7 replies, 2 voices, and was last updated 2 years, 1 month ago by David.
June 3, 2019 at 1:51 am #918244Joe
I’m currently unable to get a Page Header element to work on the WooCommerce Product Archive: https://impressionberlin.com/all-products/
I have a Page Header set-up and set to Custom Image, but it does not display the image. (If I add a div with text to the page header content it does display, so the problem is not with the display rule).
On the other pages on the site, I am only able to display Page Header images by using Featured Image — if I set them just as a custom image, they do not display. (eg. https://impressionberlin.com/studio/ — the Page Header is displaying featured image)
Could you make any suggestions of how to fix this, please?June 3, 2019 at 4:04 am #918300DavidStaffCustomer Support
this page: https://impressionberlin.com/studio/ isn’t actually showing the Header Element background but the normal featured image for that page – edit the header element and add some Top and Bottom padding to the element and you will see what i mean.
Is this possibly the issue you’re having with the Product Archive? Let me know.June 3, 2019 at 4:09 am #918301Joe
Hi David. Thank you!
You’re quite right, so the question is: why aren’t Page Header Elements displaying backround images?June 3, 2019 at 4:13 am #918303DavidStaffCustomer SupportJune 3, 2019 at 4:22 am #918310Joe
Thank you — I had a feeling it would be something simple that I was missing 🙂June 3, 2019 at 4:28 am #918317DavidStaffCustomer Support
As a guide for making images show full size and to be responsive use % top / bottom padding instead of pixels. Best method is to calculate the aspect ratio % by dividing the original image height by its width. The % you have should then be applied as the total top and bottom padding.June 3, 2019 at 4:45 am #918334Joe
Thanks again — I was going to ask about making it responsive.
I’ve done what you suggested, but that sets the padding as a percentage of the browser width, not the container, right?
So on larger screens, where browser is considerably wider than container, the padding is too great. ( as seen on staging site: https://incandenza.net/impression_DEV/all-products/ )
I guess I just have to address that with responsive CSS for the largest screens, unless you can suggest something else I’m missing..?June 3, 2019 at 5:21 am #918350
- You must be logged in to reply to this topic.