-
Hi team, I’m using CSS to style my blog images. Using Classic Editor. Here’s the code I’m using got:
/*This one styles right-aligned images WITHOUT caption*/ .elementor-widget-theme-post-content img.alignright { /*For images inserted by Classic Editor*/ margin-right: -10vw; margin-top: 0.5em; margin-bottom: 0.5em; /*padding: 0 0.5em;*/ /*commenting this one out but keeping here in case it's useful*/ width: 40%!important; /*Must add !important or it will not work, likely cuz it's overridden by image size setting in editor*/ } /*This one styles right-aligned images WITH caption*/ .elementor-widget-theme-post-content .wp-caption.alignright { /*For images inserted by Classic Editor*/ margin-right: -10vw; margin-top: 0.5em; margin-bottom: 0.5em; /*padding: 0 0.5em;*/ /*commenting this one out but keeping here in case it's useful*/ width: 40%!important; /*Must add !important or it will not work, likely cuz it's overridden by image size setting in editor*/ line-height: 1.2em; }What I want is for the image to adhere to a certain fixed width regardless of their actual dimensions. Using this code, if the image has no captions, it’s able to be of a fixed width. However, if it does have captions, the width is only fixed if the image’s actual width is above a certain value. If it’s a smaller image, it will be auto-padded on both sides. I’m not sure how to fix this, but I’m guessing the problem has to do with captioned images belonging to a different parent compared to no-caption images?
Here are two screenshots:
No Captions
With CaptionsThe first one is a no-caption image, the second one has captions. Both have the same dimensions when added in Classic Editor, but in the second one, it does not scale/fill the container.
-
Hello,
Your layout seems to be built with the Elementor builder. Please get in touch with their support team for your particular issue.
-
Hi George, thanks for the prompt response. The layout was built with Elementor but I’m quite sure it has no bearing on the issue, as I tested it on a staging site without Elementor and still have the same problem. You’re only seeing the Elementor selector because it’s in an Elementor container, but the classes .wp-caption, .alignright and the img tag are all part of the theme/Wordpress installation.
I could show you screenshots of the staging site if you’d like to see how it appears there.
-
Can you link us to the page where we can see images with and without caption?
-
Sent, thanks Ying!
I’ve also cleaned up the CSS code in SimpleCSS so only the part that affects right-aligned images remains.
-
When you add a caption to the WP image block, its structure changes from
- imgto
- figure - - imgAnd the class
alignrightandwp-captionare on thefigure, not theimganymore.If you want to target the image with caption, the selector needs to be
.wp-caption.alignright imginstead of.wp-caption.alignright.Try this CSS:
figure.wp-caption.alignright img { width: 100%; } -
Thanks Ying. I tried that before too, but what I don’t understand is why, when I set the width to 40% for both the no-caption and with-caption selectors, they’re sized differently.
For the sake of simplicity, I trimmed the code down to this:
figure.wp-caption.alignright img { width: 40%; } img.alignright { width: 40%; }So you’d expect both images to be sized the same, but instead, this is the result.
screenshotI want the captioned image to be sized/scaled the same way as the non-captioned one. My guess is, the captioned image is constrained by a different parent container which has a fixed width?
-
Hi there,
Took a look at your page and you’re right, it’s a parent container thing.
Here’s what’s going on: WP wraps captioned images in a
<figure>with an inline style. In your case it’sstyle="width: 290px"(image width minus 10px of padding that WP adds). Your.wp-caption.alignright { width: 40% !important; }CSS overrides that fine, and the figure ends up at ~516px (40% of the content area). No issues there.The problem is the
<img>inside. You don’t have a width on it, so it just renders at its natural 300px. Since that’s smaller than 516px, it doesn’t fill the figure – that’s where the extra space is coming from.About why your test CSS didn’t behave the way you expected:
figure.wp-caption.alignright img { width: 40%; } /* captioned */ img.alignright { width: 40%; } /* non-captioned */These look like they should do the same thing, but 40% is relative to different parents.
img.alignrightis 40% of the content area (~1291px > ~516px).figure.wp-caption.alignright imgis 40% of the figure (~516px > ~207px). So the captioned image comes out way smaller.Ying’s fix is the right call:
figure.wp-caption.alignright img { width: 100%; }The figure controls the overall size (40% of content), and the image just fills it completely. Same result as the non-captioned version.
-
Thanks Alvind! So if I want the captioned image to also fill 40% of the post content area like the non-captioned image, what should I do?
-
As mentioned, adding this CSS should do it:
figure.wp-caption.alignright img { width: 100%; }Have you tried adding it? The captioned image should then look like this:
https://cln.sh/9jzzsRynxWFSvFnLbYpY -
No I’m still not getting it even after adding Ying’s code, so sorry. My images are still differently sized. Could you paste the full code that you have?
This is what I have in my code (streamlined)
img.alignright { width: 40%; } /* non-captioned */ figure.wp-caption.alignright img { width: 100%; } -
The CSS I suggested has not been added to your site:
https://app.screencast.com/tS2PcK35lIcNz -
Hey Ying! I did add it, but didn’t save it. I was testing it out in the customizer.
I used the code and this is what it looks like on my end:
screenshotI’ve also saved the code anyway for easier reference.
-
You’ve removed your original CSS, the CSS I suggest is an add-on to your existing CSS.
-
Ahh! Ok now it works, and I also finally understand the previous explanations. Thank you all so much for your help!!
-
You are welcome 🙂
- You must be logged in to reply to this topic.