Archived topic
Padding header in tablet
7 replies · Started by Luis Miguel Rosero on August 24, 2022
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
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
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?
Hi there,
try adding this CSS:
@media(max-width: 1024px) and (min-width: 769px) {
.site-header .inside-header {
padding: 20px 40px;
}
}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.
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 :)
completely satisfied with your attention, support and words
Glad to hear that!
