- This topic has 7 replies, 3 voices, and was last updated 1 year, 7 months ago by
Tom.
-
AuthorPosts
-
November 19, 2020 at 8:32 pm #1538401
Gabriela
Hi,
I’m working on a child theme from GeneratePress. I have written some CSS for parameters I could’t change in Customizer. But there’s some I can’t control.Please look at this page https://danielaschneider.com.br/portfolio/artur-alvim/ in tablet and mobile versions.
I can’t realize why the header height remains so tall. I see at inspector that there’s a mobile-menu in html that should’t be there, since in mobile versions I am using off-canvas overlay menu.
Also in tablet version, there is a header height too tall (with mobile-menu selectors in html) and also the left sidebar (which in desktop view contains the menu), and also inspecting there I find the site-navigation selectors. Those to areas with menu selectors shouldn’t be there.In Customizer, many controls don’t respond, in tablet and mobile modes, like padding, margin, and many others.
November 20, 2020 at 5:20 am #1538775David
StaffCustomer SupportHi there,
do you have an mockup image of what you’re trying to achieve for the different device sizes ? It will help us understand what the best way forward is.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 20, 2020 at 8:38 am #1539172Gabriela
Hi David,
The central drawback is that I cannot control the mobile and tablet header height, and the presence of the left sidebar!-
Look at the snapshots I’m attaching here (please pay attention to file names):
- https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/1-Artur_Alvim_-_Daniela_Schneider_desired-tablet-layout.png
- https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/1-Artur_Alvim_-_Daniela_Schneider_tablet.png
- https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/2-Portfolio_-_Daniela_Schneider_desired-mobile-layout.png
- https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/2-Portfolio_-_Daniela_Schneider_mobile-header-too-tall.png
- https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/3-Artur_Alvim_-_Daniela_Schneider_desired-mobile-layout.png
- https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/3-Artur_Alvim_-_Daniela_Schneider_mobile-anotated.png
- https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/3-Artur_Alvim_-_Daniela_Schneider_mobile-header-too-tall.png
- https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/4-Artur_Alvim_-_Daniela_Schneider_mixed-breakpoints.png
I guess I have too many breakpoint controls to manage… (Customizer, GenerateBlock container, SmartSlider, media, and maybe others).
November 20, 2020 at 2:30 pm #1539479Tom
Lead DeveloperLead DeveloperHi there,
Your screenshots don’t seem to be working.
However, you have this custom CSS added to your site:
.main-navigation .main-nav { margin-top: 8em; padding: 0 64px; width: 320px; }
That’s why it’s so tall on mobile.
Try replacing it with this:
@media (min-width: 1024px) { .main-navigation .main-nav { margin-top: 8em; padding: 0 64px; width: 320px; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 20, 2020 at 4:35 pm #1539553Gabriela
Hi Tom,
Great! That solved the problem of header too tall.Sorry for the links not working. I have fixed them below. Can you please help me about the presence of left sidebar in tablet version (when hamburger is already displaying)?
In Customizer you can define mobile menu breakpoint, but where do I define tablet breakpoint? In Customizer, many settings for tablet don’t work, don’t make difference, or you can’t set – is it so or am I missing something?
In GenerateBlock container block you can define Desktop, Tablet and Mobile. How do I set tablet layout breakpoint globally, so that I can view the settings I made in GenerateBlocks container block?
-
Please look at the snapshots I’m attaching here (please pay attention to file names):
- https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/1-Artur_Alvim_-_Daniela_Schneider_desired-tablet-layout.png
- https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/1-Artur_Alvim_-_Daniela_Schneider_tablet.png
- https://kilate.pro/_transfs/DanielaSchneider/breakpoint-setting/4-Artur_Alvim_-_Daniela_Schneider_mixed-breakpoints.png
November 21, 2020 at 10:54 am #1540333Tom
Lead DeveloperLead DeveloperTo ditch the left sidebar as a specific breakpoint, you’d need to do this:
@media (max-width: 1280px) { .site-content .content-area { width: 100%; } .is-left-sidebar { display: none; } }
You just need to match that breakpoint with the mobile menu breakpoint value.
Let me know if that does it or not 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentNovember 21, 2020 at 11:58 am #1540393Gabriela
Hi!
Perfect! Thank you!November 22, 2020 at 12:04 pm #1541427Tom
Lead DeveloperLead DeveloperYou’re welcome 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.