Closing the gap…

barrygcooper · Member · Jun 30, 2014 at 2:18 pm
Copy link

Add topic to favorites
Hey folks,

Does anyone know how I’d be able to close the gap between “Continue reading” and the horizontal line below? Having trouble working out the relevant element. You can see it here: http://www.barrycooper.com

Thanks for your help!

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Jul 1, 2014 at 12:20 am
Copy link
The best way to show you how to figure this one out is to use the web inspector. Firefox has a really cool box model built in. Here’s what it looks like:

To get to that view, I right,clicked on the space below the “Continue reading ” link, selected “Inspect Element,” clicked in the HTML until the container “entry-class” div was highlighted, and then clicked the Box Model tab on the far right inside the web inspector panel.

What’s cool about that view is that it shows you exactly how much padding and margin space is applied to the HTML element that has been highlighted.

Now take a look at this view with the “article” html tag highlighted:

See how there is a bottom padding of 51, a bottom border of 4, and a bottom margin of 51?

Hopefully this will give you a good idea of what spacing you want to remove. Next, we need to sort out which CSS selectors should be used. This screenshot shows how you can test out changing the bottom padding for posts:

See how the example circled on the right uses “.hentry” as the selector? You can duplicate that and use the same thing in your custom CSS to remove the bottom padding from that container element:
```
.hentry {
	padding-bottom: 0;
}
```
To remove even more spacing, you could add another selector like this:
```
.hentry,
#main .entry-content {
	padding-bottom: 0;
}
```
barrygcooper · Member · Jul 1, 2014 at 8:36 am
Copy link
This is hugely helpful, designsimply. Thank you very much!

Firefox seems to be a better bet where it comes to working out what’s what, certainly compared to Safari.
designsimply · Member · Jul 1, 2014 at 4:12 pm
Copy link
Yeah… Safari’s web inspector could definitely be improved. I think they are working on it though!

I’m particularly fond of the dev tools in Chrome too. Firefox’s didn’t used to be as good as they are now, but they’ve improved a lot lately. :)

No items found.