Authority Pro: Reduce spacing between widgets

[StephanieT]

I would like to reduce the amount of space between the Hero Section and the first widget (titled: It's Your Choice) on the home page. I've tried using Inspect Element, reading and watching videos, and I still can't figure it out. 🙁 I would prefer to add Additional CSS in Customize to overwrite the current CSS, since I have been reading that is the recommended way of changing CSS, That would also help me to find the code again at a later date, if necessary. Any help is greatly appreciated!

https://stephanietrahd.com/upt/

[Brad Dalton]

Try this https://www.studiopress.com/using-firebug/

You can use any browser to inspect the element, find the CSS rules and modify the values for the padding/margins to remove/reduce the spacing.

---

Tutorials for StudioPress Themes.

[StephanieT]

Thanks for you response, Brad. I did try Inspect Element, and as I mentioned, I also watched videos and read articles about how to use it. I'm still stumped. I can't seem to find any padding or margin values in the CSS that changes that area. Any other thoughts?

[dhknyc]

You have a few choices here.
First I would suggest that you download Firefox Developer Edition as that is a very good tool for this kind of thing.
Also when you look at the inspector realize that the elements are nested inside each other, sometimes very deeply.
Firefox Developer Edition will highlight the element that you are selecting and by clicking on the triangle next to the element name you can see the elements it contains and continue to highlight them until you find the one you are looking for.

This will move all elements of this type even if they are on a different page.
#genesis-content {
margin-top: -10px;
}

This will move the text and the image to the left of it up
#front-page-1 {
margin-top: -10px;
}

This will get rid of the padding (35px) on the top of the words “it’s your choice”. This uses the exact element that is on the page.

#text-14 {
padding-top: unset;
}

You can also use the class which will then unset the top padding for all elements that have that class. The !important is needed because that will override the rule in the themes css. This is the rule you are looking for in the theme by the way if you wish to change it there.

.widget_text{
padding-top: unset !important;
}

[StephanieT]

Thanks dhknyc! I think it's that darn nesting I have trouble wrapping my mind around! 🙂 But your post was very helpful - thank you!

[Author]

Posts