Space between posts on Homepage

  • Author
    Posts
  • #136918

    Hi, I’m trying to increase the space between two posts on my homepage. Is there a way to increase the space without CSS?

    I unfortunately don’t have a premium plan to access CSS.

    The blog I need help with is littlewhitelittlegold.com.

    #136978

    lelandf
    Theme Author

    I don’t want to say it’s impossible without Custom CSS but your options will be limited.

    For example, you may be able to use Optional Excerpts with empty paragraphs, or use a tall image with white background on the edges, simulating “space” (even though it is really consumed by an image). These would only really be helpful for vertical spacing though, not horizontal.

    Can you tell me which two posts, specifically, you want to increase the space between? And would it be vertical or horizontal space?

    #137019

    Hi,

    Thanks for getting back.

    I thought of adding a frame around the images to increase the white space but that’s my last resort because I would have to do it for every image, which is not ideal.

    Yes, I’m looking for vertical space, horizontal is fine.

    Here are screenshots to the posts on the homepage – https://drive.google.com/open?id=1dPbEPTtc72qS45BHJzoKPnNd4v36OotS

    They are in the second scroll (after you click on “older posts” the first time and you will see some more posts with little white space when you click on “older posts” the second time)

    #137020

    lelandf
    Theme Author

    Hi there,

    I agree that adding a frame around each image is not ideal, but I’m afraid my hands are tied without Custom CSS. The space you see now is how the theme is designed, without any custom styling.

    Regards,
    Leland

    #137022

    Gotcha, thanks for trying anyway.

    #137023

    Opening this again: Hi, I just upgraded to a premium plan and now am able to make changes with CSS.

    Can you please help me with the vertical spacing?

    #137035

    lelandf
    Theme Author

    Hi there,

    Of course. Try out this code for starters. Stuff between /* and */ is commented-out code for informational purposes, and can be disregarded.

    body .masonry .entry-body {
    	padding-top: 92px; /* previously 46px */
    	padding-bottom: 84px; /* previously 42px */
    }

    Feel free to adjust the numbers preceding the “px” as needed.

    As you might have assumed, the value next to padding-top adjusts the space above the post title, and the value next to padding-bottom adjusts the space below the “Continue Reading” link.

    Let me know how that works out for you or if you have any other questions.

    Best regards,
    Leland

    #137275

    Hey, thanks for sending this over.

    I just tried adding it and I was not talking about the padding-top or the padding bottom, I was more of talking about the thin line spacing between the two images.

    Can you please tell me the code I could use to increase the white space between the two images on the homepage?

    #137276

    lelandf
    Theme Author

    Hi there,

    Apologies for misunderstanding.

    Can you try this and let me know how it works out for you?

    body .masonry .hentry { padding-left: 3px; padding-right: 3px; }

    Feel free to adjust the number 3 as you see fit. The greater the number, the more space between posts. For symmetry, it’s best if both padding-left and padding-right values are equal.

    Best regards,
    Leland

    #137278

    this is perfect, thank you so much! Happy thanksgiving!

    #137882

    Hey Leland,

    Opening this again.

    So I went ahead with one of the CSS codes that squares all the homepage images (currently on the website), but when I open the blog post the image is still cut off into a square.

    Is there anyway, how I can show only squares on the homepage, and show the entire vertical/horizontal FEATURED image when I open the blog post?

    #137917

    lelandf
    Theme Author

    Hi there,

    Just to make sure we’re on the same page, I think you’re referring to this topic? https://premium-themes.forums.wordpress.com/topic/image-size-on-homepage-2/

    I took a quick look at your site and all the CSS rules are properly prefixed with .masonry which means those CSS rules can’t apply to areas outside of the Masonry layout (which is not used on blog posts).

    Can you link to a page where you’re currently seeing this on?

    Regards,
    Leland

    #137979

    Hey,

    yes, sorry i meant to post it on that topic.

    Check out this post: https://littlewhitelittlegold.com/2018/12/03/green-detox-lunch-bowl/

    the featured image (https://littlewhitelittlegold.files.wordpress.com/2018/12/11.jpg) is a lot bigger but it’s completely cut off.

    I just double checked the code as well and “.masonry” is a part of them all.

    I’ve noticed the same problem in most of the other posts as well.

    #137980

    lelandf
    Theme Author

    Hmm, this is not an issue with CSS. This is an issue related to PHP code in the theme.

    The image displayed is cropped so it doesn’t exceed 560px. For example, this is the image displayed on the post you linked to: https://littlewhitelittlegold.files.wordpress.com/2018/12/11.jpg?w=840&h=560&crop=1

    This is the default behavior in the theme right now, although I don’t think it makes much sense (because images on the index pages are not cropped vertically) and I don’t remember why I set up the theme to behave like this in the first place.

    Give me some time, like a day or so, to dig into this a little deeper. If I can’t think of a good reason to keep it as-is (and right now that’s not looking very likely), I will submit a fix that will make single post featured images behave like index featured images so they don’t crop vertically.

    I will update this thread if and when the fix is submit, and if and when the fix is approved.

    Thanks for bringing this to my attention.

    -Leland

    #137981

    Hey Leland,

    That’s awesome, thanks for all your help. Will look out for your update.

    #138053

    lelandf
    Theme Author

    Hi there,

    Just wanted to give you a heads up that the fix I submit has been approved. Looks like it’s working on your site now too.

    Thanks again for letting me know about this. Doesn’t make much sense to crop featured images on blog posts.

    -Leland

    #138199

    Hey,

    That’s awesome, thanks a lot.

The topic ‘Space between posts on Homepage’ is closed to new replies.