Need help? Check out our Support site, then


How to make posts appear smaller on the home page

  1. Is there any way I can make the pictures on my home page appear smaller without changing their actual size?
    Please help!

    The blog I need help with is udaynarayanan.com.

  2. Add the following and then you can change the width as you desire. It will change the displayed size of the images on the main page.

    .home .lay1 > div img {
    width: 290px;
    }
  3. Thanks Richard! The pictures look smaller now but the gap between them has increased. Can I also reduce the gap between two pictures?

  4. Try adjusting the post sizes in addition to the images. The Triton Lite theme uses a script called masonry to put the blocks into place, the position and spacing for each one should happen automatically after page load based using the widths of the blocks as a factor.

    Here is an example you can start with:

    .home .lay1 > .post,
    .home .lay1 > .post img {
    	width: 250px;
    }

    If the posts don't fall how you like after that, try adjusting the width value.

  5. That helped! Thank you:)

  6. You're welcome. And thanks to @thesacredpath too! :D

  7. Yes thanks to @thesacredpath too :)
    Actually I have another question. After the applying the codes you and @thesacredpath suggested, the pictures on the home page appear smaller as desired. The gap between them has reduced too. But strangely they have got slightly off center! They seem to be aligned on the left.
    Can I get them center aligned?

    Thanks,
    Uday

  8. I'm afraid I can't seem to get them to center align. You can force things by adding the following to .lay1 in your CSS.

    margin-left: 100px;

  9. Thanks Richard,,I tried this but the pictures are getting cut off from the edge. I think I should stick to the codes you and @designsimply earlier suggested:) Thank you guys!!
    Regards,
    Uday

  10. Keep an eye on this thread. Perhaps @designsimply will drop back by and have a solution.

  11. Sure I will:) Thanks!

  12. I'm back! I didn't see your questions before, but I just found them now.

    Adjusting the width and spacing for posts stacked using a masonry script like the Triton Lite theme can get tricky.

    Try adjusting the right margin to see if that helps:

    .home .lay1 > div {
        margin-right: 20px;
    }

    If not, maybe also try giving ".home .container" a width that matches up with the final post width + the margin you added.

  13. Thanks much @designsimply! I think I am OK with the alignment of the posts, it is the gap between the pictures on the home page that I'd like to reduce.

    Thanks,
    Uday

  14. The gap on the left and right of pictures, or above and below?

  15. Both left/right and above/below.

  16. I think this is a tough request! That, or I'm just having a harder time figuring it out than I should. I tested it before and didn't come up with anything good. I left it for a bit, but I'm still willing to give it another try because I'm pretty sure I've seen someone else do something similar in the past. More soon.

  17. Thank you for all the efforts designsimply! Really appreciate that!

  18. I've re-tested the CSS posted earlier, and it works for me to adjust both the image sizes as well as the width between images. Note that you must save the CSS and *then* reload the home page to view the change—testing live with browser tools or a browser add-on won't work in this case because of how the posts get stacked using a JavaScript helper.

    Here is the full set of CSS I tested (copied from above):

    .home .lay1 > .post,
    .home .lay1 > .post img {
        width: 250px;
    }
    
    .home .lay1 > div {
        margin-right: 20px;
    }

    Now, if you want to also center the whole set of images, you'll have to do it manually with some "left" space because of how everything is absolutely positioned to get them into a stacked grid. What number to use will depend on the values you choose for the CSS example above. For that example, I found that a left width of 70px looks really nice. Here is an example showing the resized images with the space between columns smaller and the main column centered:

    .home .lay1 {
        background: none;
        left: 70px;
        width: 810px;
    }
    
    .home .lay1 > .post,
    .home .lay1 > .post img {
        width: 250px;
    }
    
    .home .lay1 > div {
        margin-right: 20px;
    }

    I took out the background for ".lay1" because it is an image with a set column width for the dashed lines. If you wanted to add those back, you could download the image, change the width to match up with the new widths you choose in your CSS, upload the revised image to your media library, and then use CSS to add it back as a background on ".lay1" Here is the image:
    https://s2.wp.com/wp-content/themes/pub/triton-lite/images/lay1_bg.png

    To visualize how the block elements are spaced, you can temporarily add borders in a preview only—this will help you just see where everything is:

    .container {
    	border: 1px solid red;
    }
    .lay1 {
    	border: 1px solid blue;
    }
    .lay1 > .post {
    	border: 1px solid green;
    }

    Use the borders example to preview both before and after saving the CSS to edit the column widths and it will help you see what's happening.

Topic Closed

This topic has been closed to new replies.

About this Topic