[Resolved] Padding header in tablet

Home Forums Support [Resolved] Padding header in tablet

Home Forums Support Padding header in tablet

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2322963
    Luis Miguel Rosero

    Hi Leo, I hope you are well.

    I have made my header with the options that GP Premium offers me.

    Header full width, Inner -Contained- with primary navigation floating to the right, its breakpoint is 2000px, I want the hamburger menu icon to be visible from large screens.

    So far everything is in order, and the spacing of the header on both PC and mobile is fine, however here comes the problem, in table I have not been able to make it have a right and left padding of 20px.

    The padding on pc is 10px on the top and bottom and 0 on the sides and on mobile the padding is 10px on all sides, I would like to make the left and right padding 20 px on the table

    The ccs rules for the responsive display, are not being taken into account


    @media
    (min-width: 769px) and (max-width: 1024px) {
    padding-left: 20px;
    padding-rigth: 20px;
    }

    Padding PC is ok
    pc

    Padding Tablet is NOT ok
    tablet

    Padding Mobile
    mobile

    #2322999
    Fernando
    Customer Support

    Hi Luis,

    Can you provide the link to the site in question?

    You may use the private information field when sharing the site: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    #2323451
    Luis Miguel Rosero

    I work on my local machine.

    But this is a problem that arises because in the GP configuration options there is no spacing option for tablet, only PC and cell phone.

    Yes, there are with GB Elements, but using a GB element block would not enable the option of having an off canvas menu.

    I ask you, if I don’t have a site mounted on a remote server, then you can’t give me an answer to something as generic and general as this query?

    #2323476
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS:

    @media(max-width: 1024px) and (min-width: 769px) {
        .site-header .inside-header {
            padding: 20px 40px;
        }
    }
    #2323487
    Luis Miguel Rosero

    It’s so rewarding and encouraging when you decide to offer a good answer that really helps.

    Mr. David, thank you very much for your time and support. The code provided by you does work and solves my problem.

    They have thought to implement this breakpoint in the native options of GP, as it exists for pc and mobile.

    It would also be appreciated that on one device you can use pixels (for example on PC) and on another device percentages (for example on tablet and mobile) because you are currently forced to use the same unit of measurement for all, you cannot combine. If you choose, but don’t combine.

    Either you use px for everything or you use % for everything.

    #2323659
    David
    Staff
    Customer Support

    Thank you for your feedback.
    We will be looking to introduce Tablet responsive controls for out spacing, and i will also add mixed units ( % and PX etc ) for those settings to the wishlist 🙂

    #2323670
    Luis Miguel Rosero

    completely satisfied with your attention, support and words

    #2324371
    David
    Staff
    Customer Support

    Glad to hear that!

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