Support » Themes and Templates » Right Align a photo

  • 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)
  • Moderator Andrew Nevins

    (@anevins)

    Have you browsed solutions involving CSS?

    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!

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

    Moderator Andrew Nevins

    (@anevins)

    May you add the photo first?

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

    Moderator Andrew Nevins

    (@anevins)

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

    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!

    Moderator Andrew Nevins

    (@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.

    It still isn’t working for you?

    Moderator Andrew Nevins

    (@anevins)

    It is working for me.

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

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

    Moderator Andrew Nevins

    (@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

    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.