Archived topic
Tablet view grid / block breaking point
7 replies · Started by Ragunaath on August 21, 2021
Hi Support, I got two questions
1. I used the GP Site Library template to create a service. It uses a four column grid, on desktop it displays 4 columns, on mobile each column/container is reduced to one column displayed below each other, but in tablet view it displays 4 columns in the same view, it looks cramped, how to split that into two columns and below that another two. I am using Generate Blocks. Screenshot attached here
2.I use primary navigation menus as float right, all menus come in a stright line in desktop view, but client wants it to be split into two rows, how to achieve this, would any css code/snippet be helpful? Sample page screenshot
Thanks
Hi there,
1. See this document:
https://docs.generateblocks.com/article/container-overview/#layout-–-grid-item
Each Grid item can be selected and the % width adjusted separately for Mobile , Tablet and Desktop.
2. I would suggest adding a Secondary Navigation to create the additional menu row:
https://docs.generatepress.com/article/secondary-navigation-layout-overview/
Thanks, first problem solved, I tried to create a secondary menu but the problem is that I can use either Primary Menu or a secondary menu in the off canvas navigation, I can't list both in the mobile off canvas menu, is there any way to have primary and secondary menu in off canvas menu or CSS code to split it into two rows?
Simplest solution is to create a new Menu that ALL the menu items in your Primary and Secondary Navs, and set its location to the Off Canvas Panel.
Alternatively, if the Secondary Nav doesn't have sub menus, then you can add it to the Off Canvas Widget Area using a Navigation Menu Widget
Thanks David, I went with the first solution and it solved it.
Another issue is, I' attaching a screenshot, below is the Site footer I created with Elements, above part is end of the landing page, I use container block, there's no padding at the bottom and top for footer respectively, but there's a gap - white space, why is that? And how to fix it
Hi there,
That gap is coming from the Block Element you use as the Footer.
There's an empty paragraph block within that element. You'll have to remove it to remove the white space it causes. :D
Thanks Elvin, yup that's with that paragraph block LOL, removed it.
Nice one. Glad to be of any help. No problem. :D
