- This topic has 5 replies, 3 voices, and was last updated 1 year, 2 months ago by David.
October 12, 2019 at 1:57 am #1032574g_younes
Hello, I have a header displaying on a set of posts under a certain category. It displays the featured image in a full screen, and that’s how I want it for desktop.
However, I don’t want it to be a full screen (/full height) for mobile.
Here is what I tried so far:
1-Lifting the article container in mobile, so that the content is placed above the image and the header appears to be smaller than full screen. Problem: most of the featured image is now hidden and is not well displayed.
Here is the code I used to hide headers: (note that I selected headers according to classes I added inside them):
/*Disabling mobile header in desktop – I have an if that checks if we are on desktop before applying this*/
$(“.page-hero”).has(“.industries-mobile-headline-group”).css(“display”, “none”); //hiding the desktop
/*Disabling Desktop header on mobile – I have an if that checks if we are on mobile before applying this*/
Any help is appreciatedOctober 12, 2019 at 9:16 am #1032875DavidStaffCustomer Support
why the need for jQuery ?
It would be worth taking a step back and looking at creating the Header Element to work on Mobile first then we can assist with some CSS to make the changes to desktop. Also its best to avoid using inline styles in your HTML.September 25, 2020 at 10:37 am #1458914Laura
I’m a non-techy, so I apologize in advance. I have a long skinny photo and a square photo, each, of my header image, but wherever I use either one, the other gets telescoped beyond recognition. How do the two get reconciled?
Thanks for any help you can give me.September 25, 2020 at 8:42 pm #1459327LeoStaffCustomer SupportSeptember 26, 2020 at 12:11 am #1459489Laura
Thanks, Leo. It’s postkatrinastella.com/staging/
LauraSeptember 26, 2020 at 7:55 am #1460005DavidStaffCustomer Support
there is no automatic way to determine the size/aspect ratio of an image and switch the header element accordingly.
The only ‘easy’ way would be to assign a category or tag to distinguish which type of image was being used and to use the category/tag for the different header elements display rules.
Or Maybe the Header isn’t the right option for your type of content and perhaps removing the Header Element and just displaying the featured image would provide a better result.
- You must be logged in to reply to this topic.