Image will not align right

Community Forums Forums General Discussion Image will not align right

This topic is: resolved

This topic contains 9 replies, has 3 voices, and was last updated by  greenecon 1 year, 6 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #18944

    greenecon
    Participant
    Post count: 24

    http://www.thegreeneconomy.com: Generate

    The image looks just fine in WordPress, but when I view on the web, it is always flush left, not right or center. I have tried all KINDS of things, but still, flush left. I saw a similar post, without an answer, but now I can’t find that post so am adding mine.  I looked at wordpress.org, and they suggested I add the following to my CSS:
    img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    img.alignright {
    margin: 0 0 5px 10px;
    display: inline;
    }

    img.alignleft {
    margin: 0 10px 5px 0;
    display: inline;
    }

    .alignright {
    float: right;
    }

    .alignleft {
    float: left;
    }

    I did, no luck.  any ideas? It’s a real problem for a visual site like ours.  It sstarted when we updated to WP 3.5x.  It has NOT been a good experience.

    #18955

    media317
    Participant
    Post count: 52

    Can you link to a specific page where this is happening?


    Alan Smith
    Media317

    #18972

    Tony @ AlphaBlossom
    Participant
    Post count: 507

    Hello,

    The css for your img (.post-image) has a large negative margin, -40px, which means it’s moving the image very far to the left. That’s causing the left edge to line up with the left edge of your container.

    Try changing:


    .post-image {
    0 0 30px -40px !important;
    }

    to


    .post-image {
    0 0 30px -20px !important;
    }


    #19046

    greenecon
    Participant
    Post count: 24

    1: here is a URL:

    http://www.thegreeneconomy.com/uncle-sam-wants-your-clean-tech/

    The image at the top of the page should align right, but it is not.  There is an image further down with a caption that is aligning right. This is the first time that has happened, so I suspect that caption may override the problem.

    2: I changed css t:

    .post-image {
    0 0 30px -20px !important;
    }

    Made no difference.  Sometimes it seems that changes to CSS doesn’t change anything.  It could be Generate.

     

    #19054

    Tony @ AlphaBlossom
    Participant
    Post count: 507

    I’m sorry, the code I entered is wrong (tried to edit it but couldn’t), I left out the margin in front. Should be:


    .post-image {
    margin: 0 0 30px -20px !important;
    }

    If you can find the existing code in your generate style.css (around line 1386?), you can change it from -40 to -20. But I may have misunderstood which images you’re talking about. This change is for the images here:

    http://www.thegreeneconomy.com/category/funding-sections/

    The thumbnails are all the way to the left, and I thought you were asking about those.

    To change the large uncle sam pic on your /uncle-sam-wants-your-clean-tech/ page to be right aligned, you have to change (should be around line 2841):


    .entry-content img {
    float: left;
    padding-right: 20px;
    }

    If you remove “float: left;” it will allow your images to work properly (either left align or right align).


    #19107

    greenecon
    Participant
    Post count: 24

    You did it exactly right.  It just started looking right. Thanks.  I very much appreciate it.

    #21935

    greenecon
    Participant
    Post count: 24

    Worked to make images within posts align either right or left, but then the home page and category pages were messed up.  The text no longer wrapped around the left side image.   Not sure what to do now.

    /* atk 2-2013 Recommend we remove ‘float left’ but that messed with home page */

    .entry-content img {
    float: left;
    padding-right: 20px;
    max-width: 100%;
    }

    /* Recommend we remove ‘float left’ but that messed with category pages  ATK 2-20-13  */
    .post-image {
    float: left;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 4px;

    #22035

    Tony @ AlphaBlossom
    Participant
    Post count: 507

    I guess I don’t understand what you’re trying to do.

    Right now, there is no float:left on .post-image. If you have .post-image floated left, the category pages look fine, as well as the other pages.


    #22051

    greenecon
    Participant
    Post count: 24

    I am trying to have the images within a post have the ability to align right.  I asked the question, and made changes above which did indeed allow us to flush images within posts to align right.

    HOWEVER, we then had the category and home page images (the top section, not the two columns below) no longer wrap text.  So we have added the

    flush: left;

    back in where we took it out, and that works fine, but now the images within posts no longer will align right.  We’re back where we started.  Tana

    #22055

    greenecon
    Participant
    Post count: 24

    Looks like resolved.  I had two of these posts going under 2 categories as it took so long for anyone to answer.  The other guy said to add:

    .home .entry-content img {
    float: left;
    padding-right: 20px;
    }

    Which fixed the home page problem, then I could remove the float left from .entry-content and add it back to post.image. Everything is now working.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.