Space below image in tinymce

  • Hello Support:

    There is an old condition with tinymce.

    Looking for a best practices solution for this.

    Here the screenshot of an image floating left at side of text. Below the upper image (in PC), there is no space between the image and the text.

    Nevertheless, in MAC there is a space that holds a complete paragraph.

    Users always want these condition fixed.

    Please indicate how to fix this.

    Thanks

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi @dinamicore,

    I imagine, without looking with dev tools, this has to do with the image styles applied by your theme. Specifically, it probably has to do with the margin-bottom style.

    Furthermore; the spacing is probably cause by the browser window width. With more window width, your spacing decreases. Less window width, means not as many words can fit on a line, and things get moved around ever so slightly.

    You could add custom css rules, which based on window width, adjusts your margin-bottom style on images.

    Thread Starter Dinamicore

    (@dinamicore)

    @josh401 I used the code below, recommended for solving the issue, but did not make any change at all:

    img.alignright { float: right; margin: 0 0 0 1em; }
img.alignleft { float: left; margin: 0 1em 0 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

    Please provide further advice.

    Thanks

    Thread Starter Dinamicore

    (@dinamicore)

    One of this codes should do, but they don′t work:

    img.alignleft, img.alignright {
    vertical-align: bottom !important!
}
    img.alignleft, img.alignright {
    vertical-align: text-bottom !important!
}

    Thanks

    Thread Starter Dinamicore

    (@dinamicore)

    I reduced the container line height from default 1.8 to 1.3, and the white space below reduced; not the ideal solution, but better:

    .wpsm_panel-body {
    line-height: 1.3;
}
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Space below image in tinymce’ is closed to new replies.