Archived topic
Why captions go over article text in mobile AMP version?
12 replies · Started by Tuula on July 20, 2021
Hi,
I have Generatepress theme, GP Premium and Simple Lightbox and AMP-plugin. I am using AMP in Transitional-mode, supported content types Articles, Pages, not Media, Templates Serve all templates as AMP.
I have many problems with plugins and AMP, but captions problem is now really annoying. Images and captions are working fine in non-amp desktop version, but in amp mobile version not. In the articles the first caption is nicely below the image but other captions has moved lower and even on top of the article text.
I have in additional CSS this:
.entry-content .wp-caption .wp-caption-text, .wp-block-image figcaption {
margin-top: -0.5em;
background-color: #eaeae8;
padding-top: 5px;
padding-bottom: 5px;
font-size: 18px;
}
And you can see captions here in my site:
https://tietostartti.fi/sovellukset/wordpress-sivusto-tietostartti-uudistui/
https://tietostartti.fi/sovellukset/puheella-ohjattava-alyvalaistus-kayttoon/
Could you help me, please?
Hi there,
I'm not sure I see what you mean.
I've visited both pages and I didn't find any figcaptions are are off. From the 2 posts links you've provided, all the figcaptions behave same as this one - https://share.getcloudapp.com/6qurgpGL
Any chance you can provide a screenshot of what you're seeing? Perhaps provide the device details of where you're seeing it as well?
Perhaps this is already solved? Let us know. :)
Hi,
You can look at whatever post in my site the problem occurs always in mobile. The device is iphone 11 pro and browser is safari and google. The first caption is usually ok., but scrolling down the page captions are lower and lower and at last captions are on the top of the article text.
Here some examples
Hi,
Maybe that Simple Lightbox is not so good at all in Amp. The lightbox not working properly in amp (mobile) so I have had to turn off the amp settings (add lightbox effect turn off) in image blocks. Lightbox was nice in amp but clicking on any image it shows always the first image in that post. So I turned that setting off. Maybe the caption problem is related to that Simple Lightbox plugin?
Hi there,
Does the caption issue resolve itself if the Simple Lightbox plugin is disabled ?
Hi
Do I have to reset Simple Lightbox before removing? Reseting removes the linking to media files, am I right? I mean before disabled?
Hi,
I disabed Simple Lightbox and it does't help. Captions are on the top of the article text, if scrolling down the page. Simple Lightbox is now disabled.
Hi there,
Any chance you can share a screenshot of the issue as you're seeing it? I'm having a hard time seeing anything off while looking right now.
Let us know :)
Hi,
Here you can see screenshots.
Hi,
I have using iphone X and iphone 11 Pro and those caption problems occur both in Safari and Google browser. There are no caption problems if you are using amp in desktop.
And no caption problems when you are using Samsung A12 !!! Every caption is in the right place. Oh boys! This is only iphone-problem! Is it possible?
Hi there,
theres a little known bug with caption-side output that can cause this kind of behaviour, when display: table; is used on captions, which AMP plugins like to use.
Try adding this CSS:
.wp-block-image .aligncenter>figcaption, .wp-block-image .alignleft>figcaption {
display: block !important;
}Hi David,
Thank you so much! Now the problem has been solved!
Glad to be of help!
