Image will not align right

[greenecon]

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.

[media317]

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

---

Alan Smith
Media317

[Tony @ AlphaBlossom]

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;
}


---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[greenecon]

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.

 

[Tony @ AlphaBlossom]

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).

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[greenecon]

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

[greenecon]

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;

[Tony @ AlphaBlossom]

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.

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[greenecon]

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

[greenecon]

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.

[Author]

Posts