Figcaption Messes Up Image Width

  • Resolved kenspear

    (@kenspear)


    5 years, 7 months ago

    Dear gurus,

    On my AMP pages, I have this issue where all images with a caption <figcaption> tend to have their dimension/width blown up larger than usual.

    If you refer to the link provided, the two images without a caption are in the correct or appropriate width; the rest with a caption are in the full size beyond the width of the AMP content. May I know what causes this and how to fix it?

    Thank you.

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

Viewing 3 replies - 1 through 3 (of 3 total)

  • @kenspear In your non AMP website I can see a style="width: 1048px" in your figure tag. This is being carried across to your AMP version. There is also a class added to that figure tag in your AMP URLs with that fixed width defined. 

    figure .amp-wp-4db48ca {
    width: 1048px;
}

    Are you using an image optimisation plugin which could be the cause?

    A workaround is to set a parent max-width CSS rule for your AMP endpoints. To ensure that impacts on your AMP URLs only add the following to your functions.php file in your active theme. 

    add_action( 'amp_post_template_css', function() {
	echo "figure { max-width: 100%; }";
} );

    Let me know if that works, and if you can find the plugin or cause of the issue.

    Thread Starter kenspear

    (@kenspear)

    @jamesosborne the second method works like a charm! Thanks so much dude.

    @kenspear No problem, feel free to leave the plugin a review. Out of curiosity Do you know what plugin was causing the problem, did you test disabling any of them before applying the fix?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Figcaption Messes Up Image Width’ is closed to new replies.