Fix Overlapping Image Captions in Oxygen Builder Post Page

24 Mei 2022
Baca 3 menit
289 Views

Daftar Isi

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:

Fix overlapping image captions on websites built with Oxygen Builder using custom CSS code with or without addition plugin.
The image caption overlaps beyond the post width limit to the sidebar in Oxygen Builder

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.

Tags:

Penulis: Mohammad Ridwanullah

Founder www.zaad.my.id | Author | Web Developer | Alumni Darul Ihsan Sana Daja & Ma'had Al-Ittihad Al-Islami Camplong. Melanjutkan pendidikan S1 Fakultas Syariah di LIPIA Jakarta. Melanjutkan pendidikan S2 di Fakultas Syariah jurusan Fiqh dan Ushul Fiqh di LIPIA Jakarta.

Artikel Terkait

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

file-adduserslaptop-phoneclockdownloadmagnifiercrossmenulistchevron-leftchevron-right linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram