-
Hello, I need help with the alignment of the image captions in the tablet view.
As you can see in the image, the captions extend into the image carousel.
The URL is in the private box.
Thank you!
Screenshot: https://ibb.co/5g4BL8p1
-
Hello,
The captions are using
position: absolute; bottom: -2emwhich isn’t reliable at tablet width. Replace that with the following:.swiper .wp-block-image figcaption { bottom: 0; transform: translateY(100%); padding-top: 0.6em; line-height: 1.4em; }This pushes the caption exactly its own height below the image edge, so it works cleanly at any viewport width.
-
Hi, if I implement your code instead of this one:
/*caption text style*/
.swiper .wp-block-image figcaption {
text-align: left;
padding-left: 15px;
font-size: 28px;
margin: 0;
position: absolute;
bottom: -2.0em;
letter-spacing: 2px;
z-index: 10;
}it looks even more disaligned, especially on Desktop or mobile.
-
You will need to check with the slider plugin’s support on this one, as it’s not built with GB’s carousel block.
I also don’t see a good way to position the captions, since they vary in length and word counts.
-
Can I rebuilt the same with Generatepress’s carousel option?
-
Yes, feel free to do so 🙂
However, I think you’ll have the same problem, and I don’t see a way to address it properly, unfortunately.
- You must be logged in to reply to this topic.