[Support request] Creating different headers for mobile and desktop

[g_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.

2-creating two headers that act on the same post category type, one set as full width (for desktop), and one having a certain offset (for mobile) – then using javascript to hide the first one in mobile, and to hide the second one on desktop. Problem: this does not seem to work, as there seems to be an issue for having two different headers acting on the same page even when one is disabled.

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
$(“.page-hero”).has(“.industries-headline-group”).css(“display”, “block”);

/*Disabling Desktop header on mobile – I have an if that checks if we are on mobile before applying this*/
$(“.page-hero”).has(“.industries-headline-group”).css(“display”, “none”);
$(“.page-hero”).has(“.industries-mobile-headline-group”).css(“display”, “block”);

Any help is appreciated

[David]

Hi there,

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.

[Laura Stella]

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.

[Leo]

Can you check the URL of your site? It’s not working for me.

We can provide a better suggestion if we can see your current layout 🙂

[Laura Stella]

Thanks, Leo. It’s postkatrinastella.com/staging/
Laura

[David]

Hi there,

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.

[Author]

Posts