Text spacing is not the same in visual editor as in preview, especially when an image is added

  • Unknown's avatar
    gail2616 · Member ·

    I am new to using wordpress, so please excuse any really dumb things I say or ask.

    I am attempting to edit a page of references which has multiple texts and images. Each reference has three ‘headings’ giving the time frame, place, and job title followed by the reference itself. I now want to add a small image beside the headings for each reference to make it more visually appealing. My images upload with no difficulty and I am able to insert them wherever I want (in this case right or left side of the headings). The difficulty I’m experiencing is that when I add the image, the spacing of the headings changes, but not in the visual editor only the preview and real page. So everything looks great when I create it, but the reality is far from good.
    Here is an example:
    September 2015 – October 2015 Image would go here (beside all 3 lines)
    Cobble Hill, BC, Canada
    Caring for a Home and Fish Pond

    Then the reference itself (generally several paragraphs.

    Any suggestions would be greatly appreciated.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    You cannot deactivate the new Beep Beep Boop editor but you do not have to use it. For locating the ways and means of accessing the legacy or classic pages for creating posts, editing posts, and for viewing stats see here > Navigating the Classic WordPress.COM interface http://onecoolsite.wordpress.com/2015/04/05/navigating-the-classic-wordpress-com-interface/

    On the dashboard of your own blog at
    Dashboard > Posts > All Posts > Add New
    To create posts in the classic editor for you that link is

    http://gailrandyharrisoninternationalpetandhousesitters.wordpress.com/wp-admin/post-new.php

    On the dashboard of your own blog at
    Dashboard > Posts > All Posts one can hover over any post title and click the Edit link. and proceed with editing.

    http://gailrandyharrisoninternationalpetandhousesitters.wordpress.com/wp-admin/edit.php

    See here please > http://en.support.wordpress.com/visual-editor/#alignment

    re: image alignment
    The alignment icons in the WordPress editor are for aligning text; they are not for aligning images. They are used to achieve wrapping text around images on either the right or left-hand side, or to display an image that’s centered without text on either side of it.

    Align-left means position left, with the rest of the content wrapping around the right side of the image.

    Align-right means position right, with the rest of the content wrapping around the left side of the image.

    Align-center means position center, with no wrap-around (= the rest of the content below the image).

    If the text beside the images does not occupy the same amount of space that the image beside it does then the text wrapping will continue and the images and text that follow will have a staggered appearance.

    To prevent the staggered effect what you do is insert the following snippet of code into the Text (HTML) editor after each image/text pair:
    <div style="clear:both;"></div>

    The detailed theme description page with setup instructions for the site linked to your username is here
    https://wordpress.com/themes/twentytwelve/
    The live demo site is here https://twentytwelvedemo.wordpress.com/
    For using the customizer see here https://en.support.wordpress.com/customizer/
    All related support docs are here http://support.wordpress.com

  • Unknown's avatar
    gail2616 · Member ·

    Thank-you, timethief.
    I’ll take a look at it tomorrow and see if I can figure it out with the information you posted.
    I sure have a lot to learn!

  • Unknown's avatar
    timethief · Member ·

    Best wishes with your site. :)

  • The topic ‘Text spacing is not the same in visual editor as in preview, especially when an image is added’ is closed to new replies.