[lordinvestor]

Hello guys. I’m using Catch Evolution (Free).

When I put right-aligned images in my posts they always seem to add an extra line of white space above them. It’s not a problem if the image comes first in a new paragraph, but sometimes I want to put it some lines down inside the paragraph and that messes up the text-wrap. How can I tweak the CSS code to get rid of that extra line?

Link to example (check out the text wrap around the first two right-aligned images):

http://lordinvestor.net/mighty-monikers-how-calypsonians-got-their-names/

Password: catch

[lordinvestor]

Edit: Sorry, I meant the second and third right-aligned images.

[Mahesh]

@lordinverstor: Can you please explain further with an image as an example to clarify more so that I can help you.

Regards,
Mahesh

[lordinvestor]

Hi,

Were you able to follow the link with the password? (I don’t want it to be public yet.)

A bit down in that post, for example above the image of “Valentine Winston”, you’ll see that an extra, annoying line has been added. I can’t make it go away.

[Mahesh]

@lordinvestor: Yes, I was able to see it. Its okay. I checked it again, do you mean the gap between the line “fearsome names like Tiger,” and “Panther, Viper and Gorilla”?
Let me know further.

Regards,
Mahesh

[lordinvestor]

Yes, that’s exactly it!

[Mahesh]

@lordinvestor: Well, its because you’ve put it in two different <p> tags and there is an image in-between. This has to be modified within the content itself. Hope this helps.

Regards,
Mahesh

[lordinvestor]

I’m not sure what you mean. I can’t find any <p> tags in the whole of my code. I prefer to use the visual editor when possible. And when I add a right-aligned image inside a paragraph (anywhere but in the beginning of it), it looks alright in the editor, at first. But when I update the editor or preview my page, that extra line is added.

Are you saying I can’t make this work simply by using the visual editor? If not, how must I tweak the code?

[lordinvestor]

Actually, I have a feeling this may work if I can reduce the bottom padding/margin of the images in the posts. Can you point me to where this is best done?

[Mahesh]

@lordinvestor: You can actually adjust margin for image with the code below. Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:

.single #post-328 .entry-content .wp-caption {
	margin-bottom: 2em;
}

Note: This is the default value. Adjust the value as desired.
The problem is, paragraph is separated by <p> tags and after that comes a image <div> and again <p> tags. For some reasons, the text are breaking apart in redundant places which is causing the issue. If you can see it somehow through the text tab with raw Html, you’ll find what I mean.
Let me know further.

Regards,
Mahesh

[lordinvestor]

I see. So is it impossible for me to get rid of that extra <p> tag from within the WordPress text editor? The <p> tag does not seem to be visible there, and hence not deletable.

If not: what is your suggestion?

[Mahesh]

@lordinverstor: Are you using WordPress’s default visual editor? If so, just change to text tab, you’ll see the Raw HTML, there you can find the p tags and adjust the content. The issue is because of how you’ve put the content rather than the theme design.
Please check the image in the link below:
http://bit.ly/2cfYncD

Regards,
Mahesh

[lordinvestor]

Thanks. Yes I know about the text editor but I still can’t find no p tags there.

However, it seems to me that the culprit is the caption code (that begins with [caption id] and ends with [/caption]). I have a feeling that this code by default adds an empty line above the captioned image. By comparison, the problem with an extra line DOES NOT happen if you simply insert a right aligned image WITHOUT a caption text.

So if it would be possible to tweak the caption code that might solve my problem?

[Mahesh]

@lordinvestor: You mean to remove the Caption text?

Regards,
Mahesh

[lordinvestor]

No, I want the caption text. But not that extra empty line above it.

[Mahesh]

@lordinvestor: Its kinda hard to adjust it with CSS since the part of paragraph are in different elements. This must be adjusted through the content itself.
Hope you understand.

Regards,
Mahesh

[lordinvestor]

Ok, I will get somebody to help me with the CSS. Thanks for you patience.

[Author]

Posts