- This topic has 5 replies, 3 voices, and was last updated 3 years, 1 month ago by Elvin.
-
AuthorPosts
-
February 13, 2021 at 4:18 am #1656750Allan
On mobile view, two grid rows lack a gap:
The site is https://workgadgets.ph
This page is made with GenerateBlocks. They’re two columns of a Grid that stacks on top of each other on mobile view.
On other themes, e.g. Twenty Twenty, there’s a big enough gap:
I know I can simply add a gap below the image so there’s some space for the mobile view, but it doesn’t seem like a clean practice.
Is this a matter of changing spacing on top of Heading text? If so, what setting should I adjust?
Thanks!
February 13, 2021 at 6:03 am #1656811DavidStaffCustomer SupportHi there,
the simplest solution is to add some vertical Gap to your Grid Block, you can set them specifically for each device size:
https://docs.generateblocks.com/article/grid-overview/#editing-the-grid-block
For future GB related questions can you please raise a topic in the GB Support forum. We also have a GB Community you can join:
February 14, 2021 at 6:46 pm #1658392AllanThanks, David!
As for the theme, do you reckon there’s a gap for either the top of headings or below images/other text elements?
I wonder why I don’t need to add the extra padding for other themes such as Twenty Twenty or Storefront.
Maybe that one setting is a clean way so I won’t have to modify gaps for mobile views in the future.
P.S. Thanks for sharing the GB forum! Didn’t know it existed.
February 14, 2021 at 7:49 pm #1658417ElvinStaffCustomer SupportHi there,
I wonder why I don’t need to add the extra padding for other themes such as Twenty Twenty or Storefront.
Twenty-twenty adds in its own
margin-bottom: 3rem
to image blocks while GeneratePress uses the block library’s default style found in/wp-includes/css/dist/block-library/style.min.css
which is a WP core styling.Now if a theme doesn’t have its own specific styling for this, the WP core block styling will apply unless there’s a plugin that styles this specifically as the plugin’s stylesheet wins in CSS precedence.
That said, while GeneratePress doesn’t have any styling particular to image blocks like Twenty-twenty did, GB’s Grid Block has one. This is actually the one you see on your site.
You’ll find this when you inspect the page.
.gb-grid-wrapper .wp-block-image { margin-bottom: 0; }
But we can simply override that with this CSS on mobile for all of the wp-block-image instead of adding a manual “spacer” everytime you use an image block.
@media(max-width: 768px){ .gb-grid-wrapper .wp-block-image { margin-bottom: 50px; } }
February 15, 2021 at 6:14 pm #1659723AllanThanks for the thoughtful breakdown, Elvin!
Great to know the added spacing is below the image (instead of above headings)… and that the story behind is themes and block plugins may or may not have such CSS settings.
Nice mobile-only gap CSS:
Cheers!
February 15, 2021 at 6:40 pm #1659743ElvinStaffCustomer SupportGlad to be of any help. No problem. 😀
-
AuthorPosts
- You must be logged in to reply to this topic.