WordPress.org

Support

Support » Themes and Templates » Right Align a photo

Right Align a photo

  • RandieH
    Member

    @randieh

    Hello,
    I am attempting to add a photo to a page full of text. I would like the photo to be aligned at the top right with text wrapped around it. I have browsed many posts and youtube videos regarding this topic but none have been helpful so far.

    In the “visual” tab everything looks great, but when I hit preview the website just looks like the following, with no text wrap whatsoever:

    TITLE
    ———-
    photo

    ———-
    text text text
    text text text

    Here is the page I am trying to add the photo to: http://oropomodoro.com/menu/

    Thanks!!!

Viewing 14 replies - 1 through 14 (of 14 total)
  • Andrew Nevins
    Forum moderator

    @anevins

    Have you browsed solutions involving CSS?

    RandieH
    Member

    @randieh

    Hi Andrew,
    Thanks for the fast response.

    I found a lot of links saying to add this code or that to the css stylesheet, but none of them changed anything!

    RandieH
    Member

    @randieh

    This was the most recent:
    img.centered, .aligncenter, div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

    img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }

    .alignright {
    float: right;
    }

    .alignleft {
    float: left;
    }

    Andrew Nevins
    Forum moderator

    @anevins

    May you add the photo first?

    RandieH
    Member

    @randieh

    I added it to my gallery, and here is the link I was trying to use to right align and wrap:

    <a href="http://oropomodoro.com/2010/wp/wp-content/uploads/2012/09/Oro-Pomodoro-and-Semper-Fi-copy.png"><img class="alignright wp-image-310" style="margin: 5px;" title="Oro Pomodoro and the Semper Fi Fund" src="http://oropomodoro.com/2010/wp/wp-content/uploads/2012/09/Oro-Pomodoro-and-Semper-Fi-copy.png" alt="" width="230" height="157" /></a>

    [Moderator Note: Please post code or markup snippets between backticks or use the code button. As it stands, your code may now have been permanently damaged/corrupted by the forum’s parser.]

    Andrew Nevins
    Forum moderator

    @anevins

    Can you give us a link of the page the image is in?

    RandieH
    Member

    @randieh

    http://oropomodoro.com/menu/

    Actually, it is working now. Did you do something already?

    If not, then my question is how come it works in the real web site and not in the preview mode?

    Thanks!

    Andrew Nevins
    Forum moderator

    @anevins

    It may have taken a while to show because your browser cached the page, which you can prevent by clearing your browser cache, but still it wasn’t working for me, so I’m not sure why.

    RandieH
    Member

    @randieh

    It still isn’t working for you?

    Andrew Nevins
    Forum moderator

    @anevins

    It is working for me.

    RandieH
    Member

    @randieh

    Awesome. Thanks for looking at this with me. I had to do this for my job and it was stressing me out.

    RandieH
    Member

    @randieh

    Actually now that it is working, do you know how to justify the text? It will make the page look tidier.

    Andrew Nevins
    Forum moderator

    @anevins

    You may want to use the CSS text-align: justify to that text;
    E.g

    #mainContent p {
     text-align: justify;
    }

    Here’s a resource on that CSS property
    http://www.w3schools.com/cssref/pr_text_text-align.asp

    RandieH
    Member

    @randieh

    I am not sure that I understand. I looked at the w3 schools link. I am still at beginner level.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Right Align a photo’ is closed to new replies.