WordPress’ Shortcodes Ultimate plugin has earned its popularity by being reliable, flexible, and thoughtfully designed. Its wide collection of shortcodes works well across many WordPress themes, and the Image Carousel in particular is fast, responsive, and visually polished right away.

As with any powerful plugin, some styling choices are opinion driven. One such choice is how image captions are displayed in the carousel. By default, captions appear directly on top of the image.

In many cases this looks fine, but in others it can create layout and readability issues.
 

The Issue

Carousel captions are positioned as overlays at the bottom of the image. This works well for very short text, but problems can appear when captions are longer or when clarity is important.

My issue was:

• Critical parts of the images were covered
• Text was hard to read when overlayed on the images

Thus, placing the caption below the image became my option of choice.

 

What the Plugin Outputs

Each carousel item is rendered with HTML markup similar to this.

<a href="...">
  <img src="image.jpg">
  <span>Image Caption</span>
</a>

The caption span is styled by the plugin using absolute positioning. This removes it from the normal document flow and places it over the image.

My goal was to restore the caption to normal flow without editing plugin files.

 

A Clean CSS Based Solution

This can be solved entirely with CSS.

The approach is simple:

• Treat the anchor element as a vertical layout container
• Remove the overlay positioning from the caption
• Allow the browser to place the caption naturally below the image
• Shouldn’t be impacted by plugin updates

 

The CSS Fix

Add the following CSS to Appearance then Customize then Additional CSS, or to your child theme stylesheet.

/* Stack image and caption vertically */
.su-image-carousel-item-content a {
  display: flex;
  flex-direction: column;
}

/* Return caption to normal document flow */
.su-image-carousel-item-content a span {
  position: static !important;
  display: block;
  margin-top: 8px;
  padding: 6px 8px;
  background: none;
  color: inherit;
  text-align: center;
  line-height: 1.4;
}

/* Prevent inline image spacing issues */
.su-image-carousel-item-content img {
  display: block;
}

 

Optional Caption Styling

If you want captions to stand out a bit more, you can add light styling like this.

.su-image-carousel-slides-style-photo 
.su-image-carousel-item-content a > span {
  background: #2271b1;
  color: #fff;
  font-size: 1em;
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  text-align: center;
}

Adjust fonts, spacing and colors to suit your likes.
 

How It All Works

Shortcodes Ultimate uses absolute positioning to create its caption overlay effect. By converting the parent element into a flex container and resetting the caption positioning, the layout returns to a natural vertical flow. The caption ends up exactly where readers expect it.

This approach respects the plugin structure and avoids brittle overrides.
 

Results That Speak For Themselves!

This is an example of what the original layout of the carousel gave:

In the above, you don’t even see the navigation buttons and the caption does not stand out at all and could easily be mistaken for being part of the original image/form.

The result of these minor tweaks is:

Much more professional look with the entire image clearly displayed.

Since this is all just plain CSS, we can tweak it in any way we wish!
 

Closing Thoughts

This behavior is not a flaw in Shortcodes Ultimate. It is simply a design choice that may not fit every layout. One of the strengths of WordPress is how easily strong plugins can be adapted with small, intentional CSS changes.

When layout friction appears, inspecting the markup and making focused overrides is often the cleanest solution. Sometimes only a few lines of CSS are needed.