Image widget spacing

oliviacorin26 · Member · Apr 19, 2017 at 2:56 am
Copy link

Add topic to favorites
Hey there!
I have image widgets on the side of my home page and don’t like the spacing between them. Is there a way I can make the spacing smaller in between the photos?

The blog I need help with is: (visible only to logged in users)
rambogenius · Member · Apr 19, 2017 at 7:12 am
Copy link
Hi,

Please add this CSS code to make the spacing between the images smaller.

.widget + .widget { margin-top: 2rem; }

You can use this tutorial to learn how to add the CSS code.

Let us know if you face any problem
kathrynwp · Staff · Apr 19, 2017 at 8:24 pm
Copy link
rambogenius – thanks for pitching in! The CSS you provided would affect all widgets, in any of Ippo’s five widget areas.

oliviacorin26 – if you want to restrict the spacing changes to just widgets in the Sidebar area, you can slightly alter the CSS rambogenius provided to something like this:
```
.sidebar .widget + .widget {
  margin-top: 2rem;
}
```
You can also use pixel units if you prefer, like:
```
.sidebar .widget + .widget {
  margin-top: 30px;
}
```
You can adjust either value as you like to get the spacing you want. Let us know how it goes!
oliviacorin26 · Member · Apr 19, 2017 at 8:38 pm
Copy link
It worked perfectly! Thank you so much!
oliviacorin26 · Member · Apr 19, 2017 at 8:40 pm
Copy link
is there a way to add CSS between the title of a blog post or a page post and the first paragraph/picture? You’ll see for example on this page, there is a pretty big gap between “me and you media” and the photo.

https://signedsilverlining.com/podcast/
Same with the contact section. I am fine if the code affects all codes just so I can simplify everything no the pages!

https://signedsilverlining.com/contact/
kathrynwp · Staff · Apr 20, 2017 at 1:37 pm
Copy link
It worked perfectly! Thank you so much!

Great!

is there a way to add CSS between the title of a blog post or a page post and the first paragraph/picture? You’ll see for example on this page, there is a pretty big gap between “me and you media” and the photo.

Yep – you can reduce that space on all pages and archives with this custom CSS:
```
.page .page-title, .archive .page-title, .search-results .page-title {
    margin-bottom: 0;
}
```
oliviacorin26 · Member · Apr 21, 2017 at 12:12 am
Copy link
Okay that worked great! It’s not seeming to apply to my “podcast” page though. I think it’s because it is a post turned into a menu item. Is there a code for that?
kathrynwp · Staff · Apr 21, 2017 at 12:19 pm
Copy link
This should do the trick for the Podcast page and other posts with the same format:
```
.single .hero {
    padding-bottom: 2vh;
}
```
I’d suggest spot-checking your posts after adding this CSS to make sure the amount of space works well for everything.

No items found.