AMP Vertical Caption Alignment is off in iOS Safari

  • Resolved vincent777

    (@vincent777)


    3 years, 10 months ago

    Hi,

    The caption for my AMP pages is off vertically on Safari mobile. I checked Chrome with my Android and no issue with the caption alignment.

    For Safari mobile, I can refresh the browser or even quickly turn the screen off and on and the caption is aligned correctly.

    screenshot https://imgur.com/a/qiuWOID

    I’m using the Divi theme. Let me know if you can help.

    Thanks,

    • This topic was modified 3 years, 10 months ago by vincent777. Reason: missing tags

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Milind More

    (@milindmore22)

    Hello @vincent777

    Thanks for the support topics, The issue is specific to WebKit rendering and it is previously reported please subscribe to the github issue to get updates, you can use the following CSS workaround for now

    Add the CSS in Dashboard->Appearance->Customize->Addtional CSS

    html[amp] .wp-block-image .aligncenter>figcaption {
    position:relative
}

    let me know if this helps

    Thread Starter vincent777

    (@vincent777)

    Hi,

    Unfortunately, it doesn’t work.

    Plugin Support Milind More

    (@milindmore22)

    Hello @vincent777

    Can you please try adding the CSS below

    
html[amp] .wp-block-image {
   position:relative;
}

html[amp] .wp-block-image .aligncenter>figcaption {
    position:relative
}

    Let me know if this works for you.

    Thread Starter vincent777

    (@vincent777)

    Hi Milind,

    Still no change. There is supposed to be a semicolon after the second relative right?

    Plugin Support Milind More

    (@milindmore22)

    Hello @vincent777

    Yes, that’s correct it needs a semicolon

    Can you please try adding the below code snippet in your theme’s functions.php or in a custom plugin Also, please clear the site cache once you add the code

    
add_action(
	'amp_post_template_css',
	function () {
		?>
		html[amp] .wp-block-image {
			position:relative;
		}

		html[amp] .wp-block-image .aligncenter>figcaption {
			position:relative;
		}
		<?php
	}
);
    Thread Starter vincent777

    (@vincent777)

    Hi,

    It didn’t work. I will close this ticket, and hopefully, this issue will get resolved in a future update ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘AMP Vertical Caption Alignment is off in iOS Safari’ is closed to new replies.

Tags