Archived

This topic is now archived and is closed to further replies.

  • 0

Lessening the space between images


Question

Posted · Report post

Hi there,

 

I am wondering what CSS code I could use to lessen the space between pictures in my posts?

 

For example, I will post one picture, have a 'return' between the next one, but I want to decrease this 'return' space.

 

Any suggestions?

Thanks in advance, this forum rocks!

 

Thanks again!!

 

Vanessa

 

ps, my site is wearflatstodinner.com

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

Hi James B

 

Thanks again for getting back to me.

 

I can't seem to locate a .hentry-pad.

 

What has worked for me in terms of customization in the past, has been to go into Custom CSS and add a code that over writes the other styles I have going on, for example:

 

.hentry, .fpost .post-excerpt {
       line-height: 1.0em;
   }
 
That is what I'm using to lessen the space between the lines of text in my post.
 
Is there a code similar to that that I can use to lessen the space between the pictures (if I put two pictures on top of each other) and possibly the space between my text and THEN a picture?
 
Thanks!!
 
V

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

 

Yes, you're correct. Any code you place into the custom code area will override the core css.

 

To find the correct element in the css you'll need to inspect the html using the inspector in either chrome or firebug. It will look like this inside the inspector, you might need to go inside each element to target the hentry-pad, from what you describe it sounds like you're one above in the hierarchy, it should look like this -

http://screencast.com/t/aI9iSMe3Frf

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Vanessa

 

The gap you have between the two posts is coming from two different things. There's some padding in there and a margin by the looks of it. You'll need to remove the padding which is applied to the class .hentry-pad in order to get it looking like the other page. Then if the gap is the still too large look at removing the margin etc.

 

Using firebug or chrome developer tools you'll be able to change the code directly on the page and then copy/paste it back into pagelines to get it exact. When in the inspector click on the gap to get the .hentry-pad class to come up.

Share this post


Link to post
Share on other sites