Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Masonry blog image padding

Home Forums Support Masonry blog image padding

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #70624
    Wiktor Kolysko

    Hi Tom!

    I just started building my website on GP with all add-ons. I love the ease of use and all the customization available. I looked at Forefront (which I am using right now) and loved how the image presented in the example filled 100% of the container. However, I would like to do it for my masonry blog page and can’t find a way to do it. I have tried Element Spacing but if I set content marings to 10, the image doesn’t fill the width. Can I apply 0 margins to images only in such a layout, not touching the text?

    Also, if you look at my website http://megazyn.pl you’ll see that the text in the featured post is overlapping the image. What could be wrong? I haven’t changed anything in CSS except for the rounded navigation buttons.

    Thanks, Wiktor

    #70796
    Tom
    Lead Developer
    Lead Developer

    Hi Wiktor,

    Looks like you have the post image aligned to the left which is why it’s causing overlapping with the content – I’ll have to fix that in the theme when I’m back in my office.

    For now, align the post image to the center and it should be a lot better.

    I think the reason the width isn’t 100% is because you have the image cropped to be too small – if you change the image width to something larger is should fill the whole area.

    #70844
    Wiktor Kolysko

    Hi Tom,
    Thanks for the answer.
    About the overlapping – it is ok in the main GP theme (currently on) when the image is aligned to the left, the overlapping occurs only in Forefront.
    Also, I am not sure if the image width is the problem. In customizer, when I increase Post Image Width (even to 700 or 800), the height decreases in the blog – it seems like the ratio between width and height is kept. Right now I will stick with margins around the picture, but it would be nice to know for the future.

    Thanks,
    Wiktor

    #71351
    Tom
    Lead Developer
    Lead Developer

    Yea I’ll have to fix that in the Forefront theme and release an update.

    Your site looks great – I really like it. Only suggestion would be to set the background image size to “Cover” so it looks good on all screen sizes 🙂

    #72367
    Vsevolod Serbin

    If I understood everything right, I have the same problem with padding in masonry blocks. When the block is medium or large image fills the whole block. In a small blocks I have padding as was set in “element spacing” (only for left and right sides).
    I’m using mantle theme.
    http://fsf.tsu.ru

    padding set to 0

    padding 20

    Wiktor, your site looks great!

    #72434
    Tom
    Lead Developer
    Lead Developer

    Are you wanting padding around your text, but not your post image?

    If so, this CSS may help:

    .blog .type-post .post-image,
    .archive .type-post .post-image {
          margin: -20px -20px 20px -20px;
    }
    #72453
    Vsevolod Serbin

    Thanks, Tom.
    Actually, a few days ago post image was like that without additional CSS. I have another website builded with the same theme and there were no such issues with padding/margins around image. I’ve tried to investigate the problem using Chrome developer tools but my manipulations were useless.

    Your code works perfect, but as I see there is the same CSS for classes .separate-containers .post-image
    The picture: http://fsf.tsu.ru/wp_test/wp-content/uploads/css.png

    Or Am I wrong and this works in another way?

    #72610
    Tom
    Lead Developer
    Lead Developer

    Are you using one of our child themes? Forefront and Exhibit (I believe) push the image right up against the container borders by default – the main theme doesn’t.

    #73408
    Wiktor Kolysko

    Hi Tom, the CSS does exactly what I was asking, thanks a lot.
    However, I changed the padding around images to 5px. There is a bit of a problem about that though, because now my text is almost touching the picture in the medium size blog post (if it’s aligned to the left – it’s overlapping). Also, is there a way to make the space between the bottom of the picture and the text a little smaller? If you go to my website you’ll see that one more line of text could fit in there to make it look better. I’m on standard GP theme now.

    And thank you and Vsevolod for the kind words about my website. It feels very nice to hear that. Hope you don’t dear Polish, beacuse for testing I wrote a bunch of nonsense in those posts 🙂

    Cheers,
    Wiktor

    #73528
    Tom
    Lead Developer
    Lead Developer

    Try this:

    .post-image-aligned-right .post-image {
          margin-left: 20px;
    }
    
    .post-image-aligned-right .masonry-brick.width2 .post-image {
          margin-left: -5px;
    }
    #74085
    Wiktor Kolysko

    Actually, I think I made a mistake in the CSS before, as I set all image margins to -5px, except the bottom – hence the space.
    But, I believe that your code was supposed to change the margin of the right-aligned photo in the most recent (largest) blog post. It doesn’t work. It only changes the margin of the other post pictures, with the most recent untouched and the text still almost touching the image.

    Thanks, Wiktor

    #74099
    Tom
    Lead Developer
    Lead Developer

    Weird, try this:

    .post-image-aligned-right .post-image {
          margin-left: 20px !important;
    }
    
    .post-image-aligned-right .masonry-brick.width2 .post-image {
          margin-left: -5px !important;
    }
    #74101
    Wiktor Kolysko

    Works like a charm! I have everything I need for now. Thanks a lot for your help. Wiktor

    #74154
    Tom
    Lead Developer
    Lead Developer
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.