How to have a different header on mobile?

  • Hi, so I’m using Envira to display a hero image with a header. On mobile though, the text is too tiny.

    How could I use a different image for the mobile version? What code should I use so that a different gallery is selected on mobile, how would I set that shortcode to respond to a mobile screen size?

    Thanks for any help! ??

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hi @styzer,

    Thanks for reaching out!

    To display different galleries for desktop and mobile, you’ll need to create two separate galleries, i.e., one for mobile and another for desktop. On the desktop gallery, add the image you want to display on the desktop, and on the mobile gallery, add the image you want to display for mobile only.

    Once gallery has been created, please use the following CSS Code inside WordPress Dashboard > Appearance > Customize > Additional CSS.

     #envira-gallery-wrap-62{
            display:none;
        }

    @media screen and (max-width: 782px) {
        #envira-gallery-wrap-65{
            display:none;
        }
        
        #envira-gallery-wrap-62{
            display:block;
        }
    }

    Note – The gallery class differs from each other. The above class is taken from my setup, so it won’t be working on your end. You’ll need to check your gallery and update it. The class #envira-gallery-wrap-62 is for the mobile gallery, and #envira-gallery-wrap-65 is for the desktop gallery. <span style=”box-sizing: border-box; margin: 0px; padding: 0px;”>To get the gallery class, right-click on the gallery on the front end and click on ins</span>pect, which displays the class as shown in the screenshot?here.

    I hope this helps! Could you please let me know if you have any questions?

    Thanks! ??

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.