-
Posts
-
I want to put several Grid Rows below each other with a small amount of vertical space – a gap – between each row.
I have six Grid Rows here. Each column contains an image and a text block.
https://www.missouriartscouncil.org/featured-artists/#morefeaturedartistsThe rows are currently separated by Separator/Whitespace > Whitespace 5. If I set the px at any lower than 5, including negative numbers, nothing happens. BTW I am very surprised that the whitespace is so large at a setting of only 5px.
If I delete the Separator/Whitespace, the layout reverts to the default with no gap between rows.
I want to adjust the gap between the rows. Ideally, I want to be able to do that only for rows on individual pages and not for all rows on the website.
It looks like the directions here https://kriesi.at/documentation/enfold/grid-row at “Gap between grid cells” will be useful if someday I want a gap between the cells in one row as well as a gap between rows. But at this point all I want is a gap between rows.
Hey missouriartscouncil,
Thank you for your patience and the link to your page, in this situation the whitespace separators are also getting a 50px top & bottom padding, we can remove this with this css for this one page by adding this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:#top.page-id-21587 [id^='after_submenu_'] > .container > .content { padding: 0; }If you would like to use this for other pages please adjust the page ID in the css
page-id-21587
After applying the css, please clear your browser cache and check.Best regards,
MikeThanks, Mike. Before I try that, I have two questions:
1) Where do I find the ID number for each page?
2) Why are the whitespace separators between the Grid Rows on the Featured Artists page getting an extra 50px top and bottom padding? I’ve never had that happen with whitespace separators before, and I have been using them in Enfold since building the website in 2016.
For instance, on this page:
https://www.missouriartscouncil.org/missouri-arts-awards-2021
The color section that beings “Honorees” is built with “Honorees” as a Special Heading within one column. Below it is a whitespace separator of 20px. Below that are two columns, 2/3 and 1/3, one with text (“Arts Education”), one with an Image element. There’s no extra 50px top and bottom padding on that separator.Hi,
To find the page IDs you can either hover over the edit button in the WordPress backend:
or look in the page source code, (F12 on Windows), in the body tag
As for why this is happening, I’m seeing that after each grid row a after_submenu is created, but I don’t see a sub-menu, except your grid rows are links, like a menu,
each submenu div has a .content class which is effected by the layout.css rule
Another approach instead of my css could be to add a custom class the whitespace and remove the padding that way, but I believe my css is pretty sound and should not cause conflicts especially if you limit it to certain pages.Best regards,
MikeMike, your CSS worked like a charm! I am looking to create more stacked Grid Row layouts in future, so being able to make the changes specific to certain pages is a great tool to add to my box. Thank you!
I am also very glad to learn about how to find the page ID and more about how to understand the source code.
Further tracking down the whitespace behavior:
I created a test page with stacked Grid Rows *without* any links on the rows. First I stacked the rows without any separator and looked at the source codes. There was no “after_submenu” present. Then I added the whitespace separators and looked at the codes. Sure enough, between each of the Grid Rows, “after_submenu” had now appeared. Here’s the page with the separators: https://www.missouriartscouncil.org/grid-row-test/In comparison, I looked at the source code on other pages where I am using whitespace separators, and also created a test page where I added such separators between color sections and other layout elements. All the test cases looked normal, and there was no “after_submenu” in the code.
So it looks like adding horizontal whitespace between rows is triggering that unwanted “after_submenu” code that is adding the extra 50px of top and bottom padding. I recommend that Enfold take a look at fixing this bug.
Hi,
Thank you for the feedback, I did some further testing with gridrows, which are full-width elements, and found that any element that you add between the gridrows creates the div with an ID after_submenu_x, such as the text element and special heading element.
So while the div ID could or should be after_grid_x the div must be present because it is the container_wrap after a fullwidth element, each div after a fullwidth element is structured like this: container_wrap > container > content > etc.
for these the default 50px padding is typically desired so the elements are not on top of each other, if you try a text element or special heading element after a fullwidth element you will see that it is natural to the Enfold layout. So I would not say that this is a bug, but I can see with the Whitespace Separator element this may not be desired because the Whitespace Separator itself is typically used to create a certain space, this is may not true for all Separators because some are used to show a line such as the Short Separator.
So with changing this the issue is that with css there are no parent selectors for child elements, what I mean is that is to look backwards from the Whitespace Separator to the .content class to remove the padding universally across the site would need to be done with javascript. The reason I was able to do it with css above was because I looked for a unique pattern to your situation and recommended using page IDs so not to cause conflicts, basically a custom solution.
As I pointed out above, a solution that would probably be more commonly suggested would be to add a custom class to the Whitespace Separator element for use after full-width elements to remove the padding.
I will submit this to the Dev Team for further review and reply when I hear from them, but for now I recommend that you use the solution above as it seems to be working for you. Let us know if you have any issues getting the solution to work for you on other pages and we will help.Best regards,
MikeThanks so much for testing further and giving me all the deep-dive details. This all makes sense. I like using full-width elements, and I now know a great deal about how they behave. Your per-page custom CSS solution is ideal for my situation, because I don’t want the default spacing for the Whitespace Separator to disappear everywhere I use it, just in certain cases.
Fantastic support, Mike!
- The topic ‘Adjust vertical space/gap between Grid Rows?’ is closed to new replies.