WordPress.org

Ready to get started?Download WordPress

Forums

atheros
[resolved] [closed] Problem aligning images (12 posts)

  1. lone77star
    Member
    Posted 1 year ago #

    I'm new to the atheros theme and was surprised when I previewed my first article that the images aligned as they should, but the text did not wrap around them as I had hoped. This left big, ugly spaces beside the images.

    I attempted to fix this by adding "alignright" or "alignleft" in the image "class" statement, but this didn't solve the problem.

    http://www.and-the-pursuit-of-happiness.com/blog/

    Image alignment seems to look all right in the editor and when I use it in other blogs (different themes), but not here.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Did you change any of the theme CSS?

    .alignright, img.alignright {
        display: inline;
        float: right;
        margin-left: 24px;
        margin-top: 4px;
    }

    The inline is likely causing problems - try changing that to "block"

  3. lone77star
    Member
    Posted 1 year ago #

    Hi WPyogi,

    Thanks for the fast reply, but that didn't fix it.

    If I understand inline and block correctly, "inline" is the default and one theme I regularly work with on another site doesn't explicitly define the "display" parameter, so would default to "inline," and it works just fine.

    "Block," if I understand it correctly, makes the item take up an entire line as if it owned it, which is what appears to be happening with "inline."

    It seems the problem is somewhere else and I have not yet found the source.

    How can I get the text to wrap around the picture, instead of the picture hogging an entire block?

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    One other problem, at least on the page you linked to, is that for text wrap to work, you need to insert the image before the text.

  5. lone77star
    Member
    Posted 1 year ago #

    WPyogi, thanks again for your fast response, but I'm afraid that I always insert before the text. I learned that trick early on in my own HTML hand-coding of my dozen websites.

    I did double-check and yes, the image code is just in front of the text it should be wrapping with.

    Any other thoughts? I appreciate your help.

  6. lone77star
    Member
    Posted 1 year ago #

    I might add that changing themes didn't fix the problem, either. I tried WordPress's Twenty Eleven and still had the same problem.

    What still has me puzzled is that the wrap shows in the editor, but disappears in the actual web page view.

    I also deleted the first image and made sure that my insertion cursor was at the start of the text line for the first subhed. Same problem.

    The only significant differences that I know of are the WordPress version (3.5.1) which I've never used until this installation, and the fact that each of the images use a link URL to an external site. I can't see how such a URL link would affect text wrapping, so I'm left wondering if WordPress 3.5.1 is the culprit. I say that cautiously, because I know there may be other factors involved that I haven't looked at yet.

  7. Sridhar Katakam
    Member
    Posted 1 year ago #

    Add the following at the end of active theme's style.css (WP dashboard -> Appearance -> Editor):

    .entry-content h2 {
        clear: none;
    }
  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yes the above addresses the problem but changing the CSS like that site-wide may have other problems. I tested the theme on a test site and it's because you are putting a heading under the photo - you should put that in the post first - then the image and then the text.

  9. Sridhar Katakam
    Member
    Posted 1 year ago #

    To make it less generic, the following can be used instead:

    .wp-caption + h2 {
        clear: none;
    }

    The above will only work on any/all h2 element(s) that appear immediately after any element that has wp-caption class. So when the above selector is used, one of the conditions is that you will need to specify a caption. I am guessing that if a caption is not specified, then the div will not get wp-caption class. You can test it.

    Also make any changes in a child theme and not directly in the main theme itself in order to prevent loss of customizations upon theme updates.

    http://codex.wordpress.org/Child_Themes

  10. lone77star
    Member
    Posted 1 year ago #

    Wonderful, guys. I was just coming back to say that I found the problem, and I see you did, too.

    I found a year-old post that suggested "clear: both;" was the problem by eliminating floats.

    WPyogi and srikat, both of you have been of immense help. Thanks!

  11. ckrakoff
    Member
    Posted 1 year ago #

    Is there any solution for those of us who simply write our blog posts in visual and don't deal (or know how to deal) with underlying code? It all worked fine before I upgraded to 3.5.1 and now nothing works: I can't add links, I can add tags only in Quick Edit, and it is a chore to insert images, and I can't get them to align properly with the text. The "Add Media" button doesn't work, so I have to copy and paste images and can't do anything to make them fit with the text. Any help or advice?

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    Yeah, hire someone at http://jobs.wordpress.net to do the work for you or figure it out yourself. Of course we can help with the figuring out bit to a certain extent.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic