Archived topic
How to Add Padding
7 replies · Started by Linda on October 23, 2020
Hi Support,
I saved a support article on doing this for an h6, but can't seem to figure out how to apply it to my blog image.
I'm stuck on what I put and where I put it.
-
Do I name the class something in the Advanced - Additional CSS section on the page? If so, would a good name be "blog-image"?
How do I write the actual CSS in Customizer - Additional CSS? Would it be something like this:
blog-image {
margin-right: 20px;
}Apologies for being dense on this. I've been searching for CSS how to but can't translate what I've read t what I'm trying to do!
The page I'm testing this on is: http://stage.mygoforthegreen.com/crush-your-2020-goals-in-4-simple-steps/. The image is the one at the bottom with the bullet list to its right.
Thanks for your help ... once again,
Linda
Hi there,
The name of the class you've added is blog:
https://www.screencast.com/t/TajwNAwf
So your CSS should be this:
.blog img {
margin-right: 20px;
}Leo, thank you so much! I was close in my attempts, but forgot the dot before "blog" and I put a dash between it and image ... and once I put "image" first!!
Thanks, too, for checking out the page and for your screenshot so I could see the div name in the code.
Will try this out and let you know how I do ... and I'll save this "tech tip" from you, too~
Linda
Sounds good. A quick (free) course like this might be helpful:
https://www.codecademy.com/catalog/language/html-css
Thanks, Leo. Love your course suggestion. I need to learn more about this whole area. Any learning I've done to date has been too hit and miss!
Linda
No problem :)
Hi Leo,
Just did it. Worked perfectly! Thank you again. :-)
Linda
P.S. Have just re-discovered Tom's Simple CSS plugin. When I try to reduce space between heading and list on this page (https://mygoforthegreen.com/coaching), I can make it work with this code:
h3 {
margin-bottom: 5px
}BUT it reduces space for all H3s on the page, which I really don't want.
So I tried this code to reduce space above the list:
list {
margin-top: 5px
}
BUT it doesn't work. Is that because the spacing after H3 is set at the default?
Is there a way around this?
Thanks!
Can you open a new topic and specify which element I should be looking at?
Sounds like you could really use that course I suggested.
