Border on thumbnails Masonry Gallery

Thanks for your reply. The site is not online, thats why i posted a screenshot. But i post another one to explain it the best way i can. Please ask if there is something that is unclear.

The image to the right, with the red border, is how Masonry Gallery displays the images now. It fills up the area above the text, and there is no grey border around it.

The image to the left, with the green border, is what i want. It only looks that way now because i made a grey border around that image before uploading it to the gallery. The red line just shows where it really is now. I also made a green line down under the image to show that i would like the image to align with the text below.

So i wonder, is it possible to do this in the Quick CSS? (The reason i want to do it is that if i use a border the image will not align with the text below in all screen-resolutions.)

For example, i used this code that i found here to increase the white space between images:

.av-large-gap.av-flex-size .av-masonry-entry .av-inner-masonry {
margin-right: 40px;
margin-bottom: 40px;
}

.av-masonry-container {
width: 103.5%;
}

Is there a similar way to do it with the thumbnail/image in this case? With pixels / percent in the Quick CSS?

• This reply was modified 10 years ago by Mathiaslarsson.

Bump.

Working exactly as i wanted Yigit, thank you so much! There is just one thing now. The area around the image is white (as the rest of the page, see the screenshot). Is it possible to make that area grey as it is around the text?

Thank you!

)” />)

Almost there :)

I tried both and i get this dark grey color.

Great, you are the best! I thought maybe i could change it to the color code. I ended up with this and it´s perfect.

.av-masonry-image-container img {
    padding: 20px;
    background: #f8f8f8;
}

Thanks a lot for your help, i really appreciate it!

• This reply was modified 10 years ago by Mathiaslarsson.