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: https://oropomodoro.com/menu/

    Thanks!!!

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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Have you browsed solutions involving CSS?

    Thread Starter RandieH

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

    Thread Starter RandieH

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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    May you add the photo first?

    Thread Starter RandieH

    (@randieh)

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

    <a href="https://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="https://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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

    Thread Starter RandieH

    (@randieh)

    https://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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    Thread Starter RandieH

    (@randieh)

    It still isn’t working for you?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It is working for me.

    Thread Starter RandieH

    (@randieh)

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

    Thread Starter RandieH

    (@randieh)

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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
    https://www.w3schools.com/cssref/pr_text_text-align.asp

    Thread Starter RandieH

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