CODEWITHSUNDEEP
javascripthtmlcssimage
KissGe
KissGe

Reputation: 45

HTML Responsive Image Grid Gallery Space Between images

I use the image gallery below. https://tympanus.net/Development/AnimatedResponsiveImageGrid/

I want to space between the two pictures.

If I put a div between the li and a elements, javascript will not find that a element. The height of the a elements inside the div 0.

I tried to modify CSS with padding, margin properties, but I was not successful. I used the background-size: containt, to position the images well.

Upvotes: 1

Views: 279

Answers (2)

TheHunter Shergill
TheHunter Shergill

Reputation: 708

Add this background-size and remove or comment background-color: #333;

.ri-grid ul li a {
    ...
    background-size: calc(100% - 5px) !important;
    /* background-color: #333; */
    ...
}

enter image description here

Upvotes: 1

aflyzer
aflyzer

Reputation: 563

add background-size: calc(100% - 10px); to .ri-grid ul li a element. 10px represent the space between each picture. You'll maybe need to change the background color of <li> and <a> to have a nice result.

Upvotes: 1

Related Questions