[Resolved] Padding header in tablet

[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

Padding Tablet is NOT ok

Padding Mobile

[Fernando]

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

[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?

[David]

Hi there,

try adding this CSS:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

[David]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Luis Miguel Rosero]

completely satisfied with your attention, support and words

[David]

Glad to hear that!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts