- This topic has 4 replies, 3 voices, and was last updated 4 years ago by
Leo.
-
AuthorPosts
-
February 6, 2017 at 6:13 am #275019
Damiaan van Vliet
Hi team,
For some reason I cannot get the Page Header image responsive.
When I follow the instructions video I don’t see the option featured image anymore.\
So I only can have a background image and that’s not responsive.What to do? Thanks!
GeneratePress 1.3.44GP Premium 1.2.94February 6, 2017 at 6:42 am #275038Leo
StaffCustomer SupportHi Damiaan,
Feature image should still be there as it’s a WordPress feature.
It should be the last metabox on the right hand side.If it’s not showing then there might be a plugin conflict, then try #1 here: https://docs.generatepress.com/article/debugging-tips/
Let me know if this helps.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 6, 2017 at 10:46 am #275179Tom
Lead DeveloperLead DeveloperIf the image is being used as a background image, you might want to do this:
.page-header-content { background-position: center center; }
That will at least center the image on all devices. Thinking about adding this into the plugin by default.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 7, 2017 at 12:58 am #275382Damiaan van Vliet
@Leo thanks for reply. the normal featured image I know but in the instruction movie about the PageHeader there is a different mentioned. But anyway that is not exactly what I meant.
@Tom, thanks, adding that CSS code is almost right for me but still the image is not fully visible when resizing the screen. Because the top header image is a photo of a person it would be great it resizes completely. Hopefully that’s possible.Thanks!
February 7, 2017 at 8:04 am #275544Leo
StaffCustomer SupportThe code isn’t meant for re-sizing the image – background images are not responsive by nature.
I think your best bet is to specify different images if your one background image doesn’t work on multiple screen sizes. You can do it with this CSS:
@media (max-width: 768px) { .generate-content-header { background: url(my-url); background-size: cover; background-position: center center; } }
Adding CSS: https://docs.generatepress.com/article/adding-css/
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.