- This topic has 7 replies, 2 voices, and was last updated 1 year, 7 months ago by
David.
-
AuthorPosts
-
June 3, 2019 at 1:51 am #918244
Joe
Hello,
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 #918300David
StaffCustomer SupportHi there,
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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/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 #918303David
StaffCustomer SupportThe header element requires top and bottom padding to give it some height – if the padding is 0 and there is no content in the element than it has zero height.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 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 #918317David
StaffCustomer SupportYou’re welcome.
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.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/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 #918350David
StaffCustomer SupportUse the pixel padding for desktop and % padding for mobile.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.