Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #98831
    lordinvestor
    Participant

    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

    #98832
    lordinvestor
    Participant

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

    #98861
    Mahesh
    Keymaster

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

    Regards,
    Mahesh

    #98869
    lordinvestor
    Participant

    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.

    #98872
    Mahesh
    Keymaster

    @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

    #98873
    lordinvestor
    Participant

    Yes, that’s exactly it!

    #98930
    Mahesh
    Keymaster

    @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

    #99055
    lordinvestor
    Participant

    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?

    #99056
    lordinvestor
    Participant

    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?

    #99058
    Mahesh
    Keymaster

    @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

    #99078
    lordinvestor
    Participant

    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?

    #99142
    Mahesh
    Keymaster

    @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

    #99220
    lordinvestor
    Participant

    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?

    #99259
    Mahesh
    Keymaster

    @lordinvestor: You mean to remove the Caption text?

    Regards,
    Mahesh

    #99265
    lordinvestor
    Participant

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

    #99315
    Mahesh
    Keymaster

    @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

    #99362
    lordinvestor
    Participant

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

Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Extra line above image messes up text-wrap’ is closed to new replies.