Fix Overlapping Image Captions in Oxygen Builder Post Page

Overlapping Image Captions in Oxygen Builder:

Sometimes we are confused when we want to attach a full-size images with captions to our posts on post templates built with Oxygen Builder, that's because we often encounter captions and images that will overlap more than the maximum width of our post page to the sidebar as shown in the image below:

At that time I found this problem I tried many ways to solve it, one of them by setting the overflow in the post element to hidden, indeed that way makes the image not cover the sidebar anymore, but the image is still cut off so that only half appears at the post page and the caption is only half seen.

Solution:

After racking my brain and looking for all the ways I finally decided to try modifying the element with the .wp-caption class using the following CSS code:

The CSS Code:

/*FIX IMAGE AND CAPTION OVERLAPS WWW.ZAAD.MY.ID*/
.wp-caption {
border: 1px solid #ddd; /*Border width, style, and color*/
text-align: center; /*The caption text align*/
background-color: rgba(0, 0, 0, 0.01); /*Background color*/
padding-top: 4px; /*Padding between image and the top border*/
	padding-left: 4px; /*Padding between image and the left border*/
	padding-right: 4px; /*Padding between image and the right border*/
margin: 0px; /*Margin*/
	max-width: 100%; /*THE MAXIMUM WIDTH FOR CAPTION*/
-moz-border-radius: 3px; /*Curvature at the corner of the border*/
-khtml-border-radius: 3px; /*Curvature at the corner of the border*/
-webkit-border-radius: 3px; /*Curvature at the corner of the border*/
border-radius: 3px; /*Curvature at the corner of the border*/
}
.wp-caption img {
margin: 0; 
padding: 0;
border: none;
}
.wp-caption p.wp-caption-text {
font-size: 11px; /*Caption text size*/
line-height: 17px; /*Caption line height*/
padding: 0 4px 5px; /*Padding between caption and border*/
margin: 0;
}

Where Is The CSS Code Placed?

You can put the above CSS code in the following way:

Using Custom Stylesheet in Oxygen Builder

You can add the above CSS code in the Custom CSS menu or Custom Stylesheet in Oxygen Builder, all you have to do is edit the existing template, when the editor is fully open, please add the CSS code above via the Custom Stylesheet menu.

Using Codesnippet Plugin

You can download the plugin here, once downloaded, installed and activated you will see a Snippet menu in the left sidebar menu of the WordPress Dashboard, please click Snippets or click All Snippets, you will see a sample CSS there, please edit, add the code above to specified place, save the changes, then activate the code. Don't forget to clear the cache if you are using a caching plugin.

Using Theme Customization

Maybe some of us have asked: "Doesn't Oxygen Builder support themes?"

It's true that Oxygen Builder doesn't support themes, but we can still insert a custom CSS over there and it still works as it should. All you need to do is: From the WordPress dashboard page select Appearance > Customize > Additional CSS and add the above CSS code > Publish. Don't forget to clear cache if you use a caching plugin.

Conclusion:

Overlapping image caption in Oxygen builder post page can be resolved using a Custom CSS with the code above, the code can be modified as you wish, the most important thing is to pay attention to the full-width property. You can add the above CSS code via Oxygen Builder, or using the Codesnippet plugin, or add the CSS code using Theme Customizer.