Jump to content
Sign in to follow this  
vanessacallaway

Lessening the space between images

Recommended Posts

vanessacallaway    0
vanessacallaway

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
vanessacallaway    0
vanessacallaway

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      I have noticed that all thumbnails on www.michaelkummer.com are scaled down in CSS or HTML, rather than on the backend by Jetpack's Photon. See https://db.tt/vNJCn7Gh and https://db.tt/3ZpkHM7G. 
      Any idea why Pins sets the image width and height to something much larger than what's shown on the screen? Is there any way to fix this so that Photon can do a better job in rescaling the images on the backend before they are delivered to the browser?
      Thanks
      Michael 
    • sfmstudios
      By sfmstudios+
      I'm using the boxes section on a local development site to play around with some options, and running into an issue.  
      Have the following settings for the boxes:
      Type: Images/SVC Media on Top Image Appearance: Standard/Default Image/Icon Width: 280px Image Opacity: 100% Each of my box images is 280x150 in size, but the result of the image on the box is a strange zoomed-in, cropped square (see attached).  I looked to adjust border properties via CSS, but couldn't find a fix.  What solutions are out there?

    • richardjacruz
      By richardjacruz+
      I received our monthly Alexa report, and it pointed out that there were missing alt tags on EVERY page on our site. Upon closer inspection, it looks like the QuickSlider which is used for the scrolling banners at the top of the site doesn't bring in the alt tags. Recently, you made a change to the RevSlider to allow images to have "alt" tags. Can you do that for the QuickSlider too?
      Thanks.
    • jvheintze
      By jvheintze+
      I just tried to figure out how to use Lax in combination with Post Thumbnails the following way: instead of showing the Featured Image on top of the content section I would like to have a Lax section above the content which loads for each post the featured image. To do so it seems there should be some kind of word press hook support necessary (not ready yet)? Or did I miss something?
    • richardjacruz
      By richardjacruz+
      I'm sorry to be a bother. I tried looking this up through the forum and then via Google, but  couldn't find the answer. 
      I want to add "alt" text to the images found in the RevSlider and the QuickCarousel at www.stevensoncrane.com. I added alt text in the media section of WP, and I refresh the page and published, but I still don't see content in the "alt=" part of any image HTML. 
      Is there a way of doing this with these two sections?
      Thanks,
      Rich
×