Tagged: horizontal gallery, image copyright, responsive
Hello,
I am struggling with the horizontal image gallery. I would like to show some text below each image and I am using “image copyright”, because I found no other possibility. The problem is, that it should show up below the image, and not on it. To get this working I used the following code:
.presse-galerie .av-image-copyright {
position: relative;
padding-top: 10px;
}
Where .presse-galerie is my class for the gallery.
This works for desktop view. But unfortunately not in tablet or mobile mode. My copyright text will displayed on the image and is not readable.
Another issue is, that the horizontal gallery is not really responsive. It only works well in desktop mode. But on smaller screens images are badly cropped. Could you please provide some CSS to make this elements responsive?
Thanks, Bettina
Hey Bpelzer,
Thank you for the inquiry.
Adding this css code should help move the copyright text below the image, but it will create a bit of extra space below the slider.
#presse .av-horizontal-gallery {
padding-bottom: 120px;
}
#presse .presse-galerie .av-image-copyright {
bottom: 0;
left: 50%;
transform: translateX(-50%);
position: absolute;
padding-top: 0;
}
#presse .presse-galerie .av-horizontal-gallery-wrap {
overflow: visible;
padding-bottom: 50px;
}
Best regards,
Ismael
Thanks, Ismael.
That CSS solves my problem with image copyright. Great!
What about the responsiveness?
When looking at the gallery in tablet or mobile view, then all images are cropped. I need them to show in full size, without croppting.
And I need the gallery to show 4 images in one row. There is no setting for that. How can I solve this?
Best regards
Bettina