Archived topic
images with captions are not responsive?
5 replies · Started by Helen on February 27, 2017
Hi Tom
I'm having some frustration with images. My site uses a lot of them, often with right/left alignment and text wrap. If I add an image alone, everything works fine. The image float right or left as appropriate. On smaller screens the image re-sizes to fit and at a certain point pops up above the text on its own row. Perfect.
But if I add a caption it all goes haywire. After a lot of experimentation it seems the CAPTION shortcode forces the image to keep the size it was initially given. It is not responsive and looks terrible on smaller screens.
I don't want to remove all captions - some are important and many are image attribution which I want to do on the image itself.
Can you help? Thanks!
PS In case you need an example pls go to ** and resize the window - pix without caption always fit well, pix with captions look bad
Hi Helen,
Not sure if I'm seeing the problem. All images look fine to me? Here is what i see from mobile:
https://s2.postimg.org/bp60sfhd5/IMG_5131.png
https://s22.postimg.org/b7vo0s1y9/IMG_5132.png
https://s28.postimg.org/q7y1dtqbx/IMG_5133.png
Also are you using a special plugin for displaying captions? Right click is disabled on your site which makes us practically blind :P
You can also add captions in the Insert Media screen through Wordpress?
Let me know if I'm missing something :)
thanks for quick reply.
No I am not using a special plugin - just adding captions via insert media as you describe.
But you are right - viewing on mobile is far better! It is when I test responsiveness in a browser (esp safari but also FF) that things look haywire.
Even on mobile it is clear that images with captions are treated differently to those without - presumably something to do with caption shortcode?
I would like to understand more but I am resting easier now I know it does not look quite so bad on an actual mobile as on my browser preview.
PS right click now works in case that helps you in any way?
hmm the images actually don't change/get treated at all since they are all pretty small and fit in any screens already.
I can't see the difference in image and the code seems to suggest the same.
Just tested with Chrome and I'm still not seeing the problem:
http://www.screencast.com/t/9lRp0HBmwTpy
Thanks - must be something on my end. Sorry to bother you.
No apologies :) Glad I could help!
