Make image copyright for horizontal gallery responsive – and display below image

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

Hi Ismael,

thanks for your support. I have noticed, that you put your code within the “quick CSS” box inside theme settings.
Did you realize, that I had already a lot of code within Custom CSS area of the WP Customizer? I am not sure, if those two areas for CSS work well together or if any of the code is rendered earlier.
What would you recommend?

And another hint for your team: if there has to be such a large amount of CSS code to make the horizontal gallery look good in all kind of displays, then this element is NOT RESPONSIVE out of the box.

This is the whole CSS code, which I had to write for my horizontal gallery:
####################################

@media only screen and (max-width: 489px) {
/* Add your Mobile Styles here */
.responsive .av-horizontal-gallery-inner {
min-height: 120px;
}
.responsive .av-horizontal-gallery-img {
transform: none;
top: 0;
}
}
@media only screen and (min-width: 490px) and (max-width: 767px) {
/* Add your Mobile to Tablet Styles here */
.responsive .av-horizontal-gallery-inner {
min-height: 580px;
}
.responsive .av-horizontal-gallery-img {
transform: none;
top: 0;
}
}
#presse .av-horizontal-gallery {
padding-bottom: 350px;
}
#presse .presse-galerie .av-image-copyright {
left: 50%;
transform: translateX(-50%);
position: absolute;
padding-top: 50px;
}
}
@media only screen and (min-width: 768px) {
/* Add your Tablet Styles here */

#presse .av-horizontal-gallery {
padding-bottom: 100px;
}
#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: 30px;
}
}
@media only screen and (min-width: 767px) {
/* Add your Tablet Styles here */
#presse .av-horizontal-gallery {
padding-bottom: 100px;
}
#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: 40px;
}
}
################################

And it is not a guaranty, that this works on every screen and/or browser… I am really getting a headache because of this horizontal gallery and I do not understand, why your theme coding and configuration settings do not provide this capability as a standard.

If I had knew this before buying, I wouldn’t have. Sorry to say that. But I am not good in coding, so this is why I am using themes and plugins. All this coding and contact with support takes very much time, that I do not get paid.

Please use my comments on this topic for a feature request!!

Best regards
Bettina

Hello Ismael,
thank you for your suggestion, but neither blog posts, content slider etc. would work for our content. Those thumbnails in the horizontal gallery ARE images, that are linked to external press articles. They are not intended to be readable, but they should not be cropped. If you click on them, then the article (all from external newspapers) show the full content.
So no post or content slider would work.
I do not understand, why the horizontal gallery has no possibility to show its images in full size, without cropping. Who wants their images to be cropped in mobile view??
I really do not understand, why there is so much CSS code needed to make them show correctly… in my opinion this element is NOT CODED RESPONSIVE.

Best regards
Bettina