There are numerous Threads on this subject but none that pulls it all together.
I want to remove the blank space (margin or padding, whichever is correct ?) between two horizontal Rows displayed on a page.
This cannot be done using the general edit as these are only two of a number of Rows on the page. The two specific Rows containing the Visual Widget.
I have used: Edit page>Edit Row (the spanner)>Attributes.
Under Row Class: I have entered ‘test-row-class’.
Under Cell Class: I have entered ‘test-cell-class’.
Under CSS Styles: I have left this blank.
I have saved and updated the page.
I have accessed: Appearance>Custom CSS I have entered:
/* My styles for test-row-class */
.test-row-class {
padding-bottom: 0 !important;
padding-top: 0 !important
}
The style contains both ‘top’ and ‘bottom’ because it is assigned to both Rows. My thinking being that if the margin/padding at the bottom of the first Row is removed but the margin/padding at the top of the second Row is not, there will still be a space between the two.
However I have tried numerous variations of this definition substituting ‘margin’ for ‘padding’ and I have tried all of the suggestions in all the other Threads on this subject.
I cannot get it to work.
Separately I have created ‘.test-cell-class’ in Appearance>Custom CSS, which works perfectly for the Row to which it has been assigned.
HELP!
Hi there,
So that I can look into this for you can you please provide me with your site’s URL and also the page on which you are attempting to apply this change?
Kind regards,
Hi Addo,
The rows in question are the two rows at the bottom of the page, both Red in color.
http://davidyabsley.info/david-yabsley-2
Thanks David
Hi David
Thanks for reaching out. This functionality will improve as the plugin matures. It looks like you’ve been trying to use row/widget attributes. Some help on that more advanced topic:
Attributes
Using your browsers developer tool to inspect the source code is super helpful. If you’re not sure how that works and are keen to learn, check out our tutorial here: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/
Here is my pre-documentation overview thread on using row and widget CSS:
Thread: How do Page Builder row attributes work – row class, cell class and CSS styles
If you inspect your source you’ll see the below:
test-row-class is a class name so it should only be placed in the Row Class or Cell Class field, not the CSS Styles field. No period is needed in front of the class name, the period is only used if you’re targeting that class under Appearance > Custom CSS.
Standard Settings
Two rows, placed one after each other will be flush as long as the first row has Edit Row > Theme > No Bottom Margin setting enabled.
It looks like your first row is still displaying 35px bottom margin. In this instance it might be easier for me to login and take a look to help speed things up. If you’d like me to do that, please email a set of temporary login details to:
[email protected]
Hi Andrew,
Thank you for your reply. Prior to posting this Thread I read extensively which included both the articles on Page & Thread that you have suggested. I know that you are very busy so I spent days trying to figure this out before asking for help.
Setting “No Bottom Margin” in Edit Rows>Theme does indeed remove the bottom margin from the first Row. It has reduced the size of the gap. And happily it appears to be Row Specific so many others will find that helpful. So thank you for that. However, it does not make the first and second Rows flush.
Clearly the second Row either has a “Top Margin” or there is some other setting causing this gap.
I have downloaded ‘Google Chrome” but find “Firefox>WebDeveloper>Inspector” is far easier to use. I am using an iMac.
There appears to be a “Panel” between the two rows but I have no idea what it is and from the source code it appears to be part of the first Row.
Could be this: div#panel-750-3-0-0.so-panel.widget.widget_black-studio-tintmce.panel-first-child.panel-last-child??
I have sent you the login details.
Thanks David
This is a private message.
This is a private message.
Thanks for the feedback and for making such a big effort before opening a thread. Although I use Chrome, I’m with you, Firefox Developer Tool is better in many ways.
I unfortunately wasn’t able to login with the details sent. Could you perhaps confirm those for us and I’ll dive in ASAP after that. Thanks.
This is a private message.
This is a private message.
Andrew: Thank you so much for your assistance.
To Remove the space below a row in Page Builder: Select ‘Edit Row’ (the spanner) directly above the row>Theme>tick ‘No bottom margin’.
If the problem persists it is the result of some other error.
In my case it was the insertion of HTML code (importing a Google Font) into the Row, rather than CSS code into Custom CSS.
Hi David
Did I respond via email? I hope so. I removed the import from the Text widget and moved it over to Appearance > Custom CSS where it ideally should be. Did you see that? It resolves the challenge.
Hi Andrew,
Yes of course! That is what I was thanking you for! I just thought I should make my thanks public and also help out by posting a solution to the problem. But on rereading the post it is not really clear that it was your solution not mine. I won’t make that mistake again.
Once again thanks. I don’t know html and css past the very basic so I would never have found the solution.
Ahh with you now :) Thanks, yeah that always helps to have the answer/resolution out in the open. Thanks for updating our thread, as you saw I forgot to.
All the best with your site.