[Support request] The header padding on my homepage is not responsive.

Home Forums Support [Support request] The header padding on my homepage is not responsive.

Home Forums Support The header padding on my homepage is not responsive.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #455720
    John

    The header padding on my homepage is not responsive. (I’m working
    on a local host.)

    The image in the header for the desktop display looks good
    with header top padding of 395, mobile 155 and tablet 360.

    When I set and save for the mobile display, however, the 155
    value is also imposed on the desktop and tablet displays. Likewise
    with the 360 value for the tablet. I.e., though I set three different
    settings, the system recognizes only one at a time and it
    uses for all three displays.

    Any help you can provide this novice would be much appreciated.
    Thanks
    John

    GP Premium 1.5.6
    #455835
    Leo
    Staff
    Customer Support

    Hi there,

    We would actually need CSS to change the header padding on mobile:

    @media (max-width: 768px) {
        .inside-header {
            padding: 10px 20px 30px 40px;
        }
    }
    #456135
    John

    Thank you for your prompt response.

    I changed the first value from
    10px to 150px. This works well for the mobile display.

    But it also alters the tablet display (which should have top
    padding of 360px) so only the top half of the header
    image is visible.

    #456286
    Leo
    Staff
    Customer Support

    You will need to set different values for mobile and tablet then: https://docs.generatepress.com/article/responsive-display/

    #456499
    John

    I added this CSS (see below). The desk top and mobile displays look
    good. But the tablet is still a problem. This time it’s not the padding.
    It’s the height of the header image which is 50% smaller (shorter) than the
    desktop image. Only the top half of the image is visible.


    @media
    (max-width: 768px) {
    /* CSS in here for mobile only */
    }

    @media
    (min-width: 769px) and (max-width: 1024px) {
    /* CSS in here for tablet only */
    }

    @media
    (min-width: 1025px) {
    /* CSS in here for desktop only */
    }

    @media (max-width: 768px) {
    .inside-header {
    padding: 150px 20px 30px 40px;
    }
    }

    @media (min-width: 769px) and (max-width: 1024px) {
    .inside-header {
    padding: 360px 20px 30px 40px;
    }
    }

    #456662
    Leo
    Staff
    Customer Support

    Can you provide a link to your site?

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