Why Bother with Image Captions
Images on your website are business assets because they are communication tools that take some time and $$$ investment. Often business owners don’t realize how far an image can go on the web. That image you put on your website could be picked up by Google Images, Facebook, LinkedIn, Pinterest, and all other sorts of pages. There are a number of ways for you to be sure that your message goes with the image. One of those tools is captions.
Why Bother Formatting the Captions?
If you use a content management system (CMS), such as WordPress, Drupal, Joomla, etc., or a web service, such as Wix, Weebly or SquareSpace, you just expect all the formatting to be spot on. That is often not the case.
An Example of a caption that’s not working because of formatting
In the screenshot, the image on the right has a caption to explain what is showing. The default caption formatting is making the page difficult to use in two ways 1) The caption takes up too much space. 2) The extra space it’s taking is pushing the next image to the left, instead of it being nicely lined up below the first image. Additionally, it’s not clear that it’s actually a caption, and not part of the image.
How to Fix the Problem
CSS coding will fix the problem. Using this solution will require some knowledge of WordPress child themes and CSS. The pattern of steps below can be applied to many web technologies, but the specifics are to WordPress and the Kahuna theme. Also, the tools illustrated are the Firefox Inspector and others.
Firefox Inspector is a great tool to help you find the names of layers so you can adjust the CSS in your child theme Find the names (specifiers) of the layers that are the captions. (See screenshot – click to enlarge).
- Make changes in style.css in the child theme files.
- Upload
If you would like more information on any of the topics in this article, you can make a request in the comments form below the article. Answers in articles are free.