[Resolved] Masonry blog image padding

[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

[Tom]

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.

[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

[Tom]

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 🙂

[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

Wiktor, your site looks great!

[Tom]

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;
}

[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?

[Tom]

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.

[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

[Tom]

Try this:

.post-image-aligned-right .post-image {
      margin-left: 20px;
}

.post-image-aligned-right .masonry-brick.width2 .post-image {
      margin-left: -5px;
}

[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

[Tom]

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;
}

[Wiktor Kolysko]

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

[Tom]

Glad I could help 🙂

[Author]

Posts