[Resolved] Different Header images for mobile devices

Home Forums Support Different Header images for mobile devices

Viewing 7 posts - 31 through 37 (of 37 total)
  • Author
    Posts
  • #493273
    Tully

    Here is the CSS.

    .desktop-image {
        line-height: 0;
    } /* remove white space between header and menu */
    
    .mobile-image {
        line-height: 0;
    } /* remove white space between header and menu */
    
    @media (max-width: 768px) {
        .inside-header>:not(:last-child) {
            margin-bottom: 0;
        }
    } /* remove white space between header and menu on tablet*/
    
    .mobile-image {
         display: none;
    }
    
    @media (max-width: 500px) {
        .desktop-image {
            display: none;
        }
        .mobile-image {
            display: block;
        }
    } /* display alternative header image on mobile.  Also see gp hooks for url to alternative images */
    #493305
    Leo
    Staff
    Customer Support

    Are you actually wanting specific breakpoints?

    If not it’s much better to use the classes in the suggested link: https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    If not I’ll need to see your site again. Feel free to start your own topic so you can use the private URL field.

    #493335
    Tully

    The classes sound interesting Leo, and I am happy to change to using them apart from one question. Does hiding things cause trouble with SEO? For example, there is something similar when using SECTIONS to hide a section, but I thought that google might penalise hidden content? I am probably wrong so happy to give the classes a go if that isn’t the case.

    #493375
    Leo
    Staff
    Customer Support

    Those classes are using CSS too as your method above. It’s just built in and using the default breakpoint.

    #493449
    Tully

    Tried that Leo but it hasn’t fixed anything. Still nothing showing on Mobile. And it also brought the space back between the desktop header and the nav bar (see earlier in this topic). Regards, Tully

    #493647
    Leo
    Staff
    Customer Support

    Can you open a new topic please as this is dragging on for quite awhile and this isn’t your topic?

    Then you can use the the private URL field I don’t have to go look for your site everytime.

    It would really help me out. (It would be great if you can also disable right click when we are solving the problem too.)

    Thanks!

    #493868
    Tully

    No worries, will do.

Viewing 7 posts - 31 through 37 (of 37 total)
  • You must be logged in to reply to this topic.