Dear SiteOrigin team, I’m discovering your Custom CSS functions. They are amazing – it is like having a teacher right there, who warns when something may not work well, when something is redundant or wrong. But there is something basic I have not been able to do: Control margins between different elemts. Sometimes I manage, other times nothing seems to work. I’m sure the answer will be obvious. Here is the problem:
On this site http://animatinglibraries.com/ I have several headings: “Bringing Life To Books And Books To Life”, “Training”, “Workshops”, “Animations” etc., always followed by a text element with a grey background. I want to reduce the gap between the heading and the text element. I tried all kinds of CSS classes but have not struck gold yet. If you could point me in the right direction I’d be very grateful. Yours faithfully, Jan.
Can’t find CSS class to control margins/padding of elements
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Caspersjan
Thanks for reaching out.
Try the following at Appearance > Custom CSS:
.entry-content .bringinglife .textwidget h1 { margin-top: 1em; margin-bottom: 1em; }Adjust as required.
Hope that helps.
Dear Andrew, it works a little bit: There is a reduction. But even if I put margin-top and margin-bottom at 0em, it is not reduced any further. If I put padding to 0px the margin is again reduced, by a few pixels. But it is as if there is something in between that I cannot control. I can see .entry-content .bringinglife .textwidget h1 in Chrome Inspect Element, but I cannot find anything above or below that sets the margin or padding that is there. Does that make sense? I set a special CSS class for the text widgets that contain “ANIMATING LIBRARIES” and “BRINGING LIFE TO BOOKS etc.” and the row below, with the grey background. The classes work in Custom CSS but still I can’t reduce the margin more than a little bit. I even tried to ad !important every time I tried to address margins or padding, in case there was a systemwide setting for space between widget content. But there is no difference.
Really this is not your problem but the styling I am trying to effect. I am asking just in case there is something set that I can’t override – or don’t manage to override – with Custom CSS.
Thank you for your patience and your help. Yours faithfully, Jan.
There is padding from the full width row as well. You can use negative margins on the headings.
Dear Andrew, indeed it works, with negative margins (I presume then that they are negating the full width row padding). For some reason the headings below (“TRAINING”, “WORKSHOPS” etc.) were now too low, they seemed to have had a different margin. I don’t know why, I went through all the settings of all rows and widgets and made sure they are all exactly the same. But I gave them their own CSS Class and now can control them separately. The result: I’m not 100% sure what it is I’m doing, but the result is what I was looking for. I’ll remember the possibility of negative CSS values – one more thing I can throw at the next problem, and one less question I put on your helpdesk plate. Thank you for your assistance! Yours faithfully, Jan.
P.S.: And thank you for the Custom CSS Revisions History – the entire Custom CSS plugin is perfect for people like me who don’t not know CSS but don’t really know it well either…
Super, that’s great, yes, adding another class or two to separately control the other headings is perfect.
You can’t use negative padding but you can you use negative margins.
W3Schools is a good reference site for things like this:
Margin: http://www.w3schools.com/css/css_margin.asp
Padding: http://www.w3schools.com/css/css_padding.asp
Chat soon.
Dear Andrew, thank you, I end up at W3Schools regularly when I search for solutions on Google. It’s very good. One question, on a different matter. Having to do and undo things over and over again (out of indecision either or incompetence) there are two mouse-mileage issues I noticed about your interface that might be either a bug or could be improved (or maybe are no issue to others because they have bigger screens…). Have you a suggestions forum, shall I open a thread or tell you?
You’re welcome to send here and I’ll log the feature request.
It is probably not relevant, or I am overlooking something. But just in case it is useful feedback from a SiteOrigin beginner:
When I am editing a page (Custom Home Page in my case because I only have a single page on a one-page site but presumably it’s the same with all pages) I do all my changes to rows, widget content etc.. When I have finished and want to save, I have to scroll down and down and down until I get to the “Save” button. On building the page in the first place that’s not so far because I start from the top and go down, but when I am doing changes on the page it’s a lot of scrolling. Some kind of sticky “Save” option would be useful I think.
There was one more thing that confused me when I changed, checked and rechecked settings today – opening the “Layout” toggle on the “Edit Row” modal “Row Styles”, when the other ones were already open. But now that I tried it again before sounding off it’s working. So there is no bug after all, only a minor disadvantageous interface observation. I could not begin to list all the advantages and nice touches I keep discovering as I go along!
Yours faithfully, Jan.
P.S.: I’m just entering RTL language on a WPML-translated page. It’s all very well worked out! Congratulations – this was a very major sticking point with the WordPress framework I worked with before I found SiteOrigin!
Thanks for that in-depth feedback, you’re right, for a long page an update button in a fixed position would be better.
Glad to hear RTL is going ok!