Space in Between (Foodie theme) Sidebar Images

[jeanettenyberg]

Can someone tell me what sort of CSS to put where to lessen the space between images in the Foodie sidebar? I have several images within one text widget, and they all have gaping spaces between them. Do I mess around with padding or margins or something? I'm fairly dumb about this stuff, but just dangerous enough to mess around with it, anyway....

(Not talking about the space between widgets, btw) 🙂

You can see what I'm talking about at http://tinyottenpeanuts.com

http://tinyrottenpeanuts.com

[Lauren @ OnceCoupled]

So, I'm assuming the images you're referring to are those in the "popular projects" section?

The first step to decreasing the space between those images is to remove all the paragraphs between them. Those might be inserted because you have "Automatically add paragraphs" checked.

The second step would be to remove margins, yes. You could use something like:

.widget img {
     margin-bottom: 0;
}

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[jeanettenyberg]

Hmmm. I tried putting that code in a couple of spots, but no deal. I don't have the auto paragraphs checked, so I'm baffled.

This is where I put your code-

[Lauren @ OnceCoupled]

Did you put those paragraphs in yourself?

The code I gave you shouldn't go inside a block, it is its own block. So you could place it UNDER the closing bracket, after where the arrow is pointing.

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[jeanettenyberg]

Oh! Okay, tried that, too, but no luck. Thanks for the suggestion, anyway.

[Lauren @ OnceCoupled]

I tested it on your site - it will definitely work, and assuming the paragraphs are removed it will be noticeable. Do you have site caching? If so, you need to clear that so your style sheet is updated.

Looking closer at your site, I'd recommend using the following instead, even:

.sidebar-primary img {
margin-bottom: 0;
}

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Author]

Posts