WordPress.org

Ready to get started?Download WordPress

Forums

Right Align a photo (15 posts)

  1. RandieH
    Member
    Posted 1 year ago #

    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!!!

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Have you browsed solutions involving CSS?

  3. RandieH
    Member
    Posted 1 year ago #

    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!

  4. RandieH
    Member
    Posted 1 year ago #

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

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    May you add the photo first?

  6. RandieH
    Member
    Posted 1 year ago #

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

  7. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  8. RandieH
    Member
    Posted 1 year ago #

    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!

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  10. RandieH
    Member
    Posted 1 year ago #

    It still isn't working for you?

  11. Andrew
    Forum Moderator
    Posted 1 year ago #

    It is working for me.

  12. RandieH
    Member
    Posted 1 year ago #

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

  13. RandieH
    Member
    Posted 1 year ago #

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

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    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

  15. RandieH
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic