[Support request] Mobile header image not showing up

Home Forums Support Mobile header image not showing up

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #493871
    Tully

    Hi Leo,

    Just started this new topic as per your request. I have deactivated right click disable (sorry, forgot I had this on!).

    My mobile header image is not showing up. I am using GP hooks and CSS, but have also tried the hide classes as you suggested with the same result (except that space has reappeared between the desktop header and the nav bar, which I also had CSS to remove which you helped me out with previously.) Thanks Leo,

    Regards
    Tully

    GeneratePress 2.0.2
    GP Premium 1.5.6
    #493900
    Leo
    Staff
    Customer Support

    Hi there,

    It isn’t working because this CSS is added:

    .mobile-image {
        display: none;
    }

    I would recommend modifying your HTML classes like this:

    <div class="hide-on-mobile hide-on-tablet">
        DESKTOP IMAGE HERE
    </div>
    <div class="hide-on-desktop">
        MOBILE IMAGE HERE
    </div>

    Then you wouldn’t need CSS at all.

    #493943
    Tully

    Hi Leo,

    As before, I tried this again but same result. Still no header image on mobile, and now I have the gap between header and nav bar again?

    #494007
    Leo
    Staff
    Customer Support

    You have a background image uploaded in Customizer > Background Images > Header.

    And you also need to disable the mobile header so the normal one would show up.

    #494086
    Tully

    I have removed the background image in customizer. What do you mean by “disable the mobile header” ?

    #494490
    Leo
    Staff
    Customer Support
    #494874
    Tully

    Okay thanks, fixed that. Now the correct image is showing up on mobile and desktop, but the mobile image is showing up on tablet even though I have “hide-on-tablet” in gp hooks. Also the white space between header and nav bar is back, despite the css you suggested a while back:

    .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 in tablet between header and menu */

    Obviously now I am not using those classes, the CSS is ineffective. So how do I remove the white space when using hide-on-desktop etc?

    #494913
    Leo
    Staff
    Customer Support

    This should remove the white space:

    .site-header {
        line-height: 0;
    }

    Hmm the hide-on-tablet would hide everything between 769 to 1024px. Are you using landscape on tablet?

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