Managing the Look and Feel of your Image Captions - Montana Webmaster

Managing the Look and Feel of your Image Captions

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?
This screenshot shows two images in WordPress. One image has a caption that is taking up too much space, pushing the other image to the left.

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.

  1. 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).

  2. Make changes in style.css in the child theme files.
  3. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.