[Support request] Creating different headers for mobile and desktop

Home Forums Support Creating different headers for mobile and desktop

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1032574
    Ghadeer

    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

    #1032875
    David
    Staff
    Customer Support

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.