Space between photos
-
Hello!
This is my site: janaemonir.wordpress.com
When I post photos in a cluster of four (as seen in this post), I would like to reduce the size the horizontal gap between the rows. Also, there is no vertical gap between the columns, and I would like to add one. I think the horizontal gap is currently 5px; I would like to do a 2px space both horizontally and vertically. I hope this is not too confusing. My problem is that I cannot seem to find the code for this in the CSS. Can you point me in the right direction? Thank you!!
~Janae
The blog I need help with is: (visible only to logged in users)
-
-
-
-
Hi, sorry, me again. Real quick: can I add a 2px space between a cluster of photos? I think that would look nice. I understand that I would have to go back and resize all of the photos for it to fit. Where/what would I add?
Thank you for your help.
-
Give this a try and see what you think. It adds a 2px border around each image in white so this would not require any resizing of images. The theme and wordpress software will compensate for the border.
.entry img { border: 1px solid #FFFFFF; }On your goodbye 2011 post, I’m not sure why it is showing a larger gap between the first and second row of images with the above code. If you go to 2px on the width, it evens out the spacing on all of them.
-
You know, trying to get spacing consistent between the larger images and the smaller images you have in the grid pattern is eluding me at the moment.
-
Hmm, it didn’t do anything for me. Maybe I put the code in the wrong place?
On the goodbye post, there is a white horizontal line between a few of the rows, maybe it just has something to do with the fact that those pictures are extra small? I usually only do clusters of 4 half-sized photos and not the super small pictures, so if that post is a little off with the new spacing that’s okay.
Is there a certain place I need to add the new code? I tried it under the a img and it didn’t work.
Thanks :)
-
You would add it to the very bottom of your custom CSS, but I was looking and working on the 2011 post rather than on the larger stacked images. Let me take another look at things in a little bit.
-
-
This will give you 1px of space between the larger images in your posts such as in the Kale Chips post.
.entry img { margin-bottom: 1px !important; } -
I gave that code a try and really loved the way the 1px margins looked between the larger pictures; it was exactly what I was going for. However, on the smaller images it was still putting a wider margin between the rows. I couldn’t change the width, plus it wouldn’t let me add a 1px margin vertically between them. So, I’m a little bummed out, but that’s just the way it is with this theme, I suppose. I took out all px margins (using the first code you suggested) and I’m really happy with that.
As always, I really appreciate your time and all the help you gave me. Your guidance is always efficient and thoughtful. Thank you very much!!
-
- The topic ‘Space between photos’ is closed to new replies.
WordPress.com Forums 