- This topic has 10 replies, 4 voices, and was last updated 5 years, 7 months ago by Leo.
-
AuthorPosts
-
July 2, 2018 at 1:16 am #613155tienanh
Hi Generatepress Team,
I am trying to use your page header. The image (dynamic feature image) shows up beautifully but just on desktop, not responsive for tablet and mobile.
Is that some additional work for you or is that some mistake on my end. Please give me some advice.
PS: I have check the forum but could not find the answer.
Thanks.
July 2, 2018 at 4:15 am #613224DavidStaffCustomer SupportHi there,
can you provide a link to the site? You can edit your original post and use the Site URL field for privacy
July 2, 2018 at 9:41 pm #613944tienanhHi David,
Please find below the link to a test post:
Please have a look and let me know what I should do?
Thanks.
PS: Looks like the Site URL field is only available when a new support topic is opened.
July 3, 2018 at 4:52 am #614194DavidStaffCustomer SupportOK, so its a landscape image on full height page, which by default is set to cover. So it will be cropped on mobile. Choices:
1. Replace the image on mobile for a portrait image.
2. Stop using full height on mobile and set the image to fit horizontally.Let me know which option and i can provide the CSS
BTW – You can Edit the first post in a topic to get access to the Site URL field and then just resubmit
July 3, 2018 at 6:22 am #614275tienanhHi David,
Could you please give me CSS for both choices. I will test and see which one is best.
Is there a way to use both of them, say, one choice for one template and the other choice for another?
Many thanks.
July 3, 2018 at 6:58 am #614301DavidStaffCustomer SupportOK:
Option 1
/* Switch Image on Mobile */ @media (max-width: 768px) { .generate-content-header { background-image: url('image_url.jpg') } }
Option 2
/* Adjust container height - change PX to suit */ @media (max-width: 768px) { .generate-content-header { height: 300px !important; } }
To apply it to specific page headers you would need to use the Page Header ID. So to effect just your current page header you would replace
.generate-content-header {
with#page-header-12061 {
The ID number can be found by editing the page header and looking at the browser URL – look for post=####
July 3, 2018 at 9:14 am #614513tienanhMany thanks David. That’s very useful and clear instructions.
Don’t you have a rating system in place? I’d be pleased to hit five-star for your support.
July 3, 2018 at 9:34 am #614522DavidStaffCustomer SupportYou’re welcome. We don’t have a support rating. We all try our best.
July 3, 2018 at 9:48 am #614534tienanhUnderstood! Thanks. Happy to have your help.
August 25, 2018 at 10:49 am #659840DavidOn this one more question. It also works with Elements Header?
I need to change the image for mobile by another responsive image.Thanks. David.
August 25, 2018 at 12:20 pm #659891LeoStaffCustomer SupportHi there,
Any chance you can open a new topic for your question?
Thanks!
-
AuthorPosts
- You must be logged in to reply to this topic.