Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Adding Pages to a Website Make an About Page

Mary-ashley Holtz
Mary-ashley Holtz
2,398 Points

Image is rotated to the right

I am using a personal image for my about page and the image is showing on it's side. How can I flip the rotation?

Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,596 Points

Hi Mary,

Could you post your code? you can use the Markdown Cheatsheet to see how.

Mary-ashley Holtz
Mary-ashley Holtz
2,398 Points

Hi Michael, I have attached my code:

HTML:

 <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <img src="img/mashley.jpg" alt="Photograph of Mary-ashley Holtz" Class= "profile-photo">
          <h3>About</h3>

CSS:

.profile-photo {
  display: block; 
  max-width: 150px;
  margin: 0 auto 30 px;
  border-radius: 100%;
}

Thanks for your help! Mary-ashley

Hi Mary-ashley,

If you're doing this in workspaces can you post a snapshot of your workspace?

We'd have a better chance of figuring out why your image was flipped.

Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,596 Points

Mary, your code is incomplete and I'm afraid we cannot review it this way. The best way would be what Jason suggested, post a snapshot of your workspace.

You can do it by doing the following:

Snapshot

Give us the link that will be generated like you see in the picture.

Mary-ashley Holtz
Mary-ashley Holtz
2,398 Points

Hey Michael, Jason- Here is a snapshot of my code https://w.trhou.se/ufqrlnrqyo

1 Answer

Steven Parker
Steven Parker
231,198 Points

Why not just rotate the image file?

While it's possible to rotate images using advanced CSS, why not just make sure the image file is correctly aligned before you use it? If you're using windows, you can use the image preview to turn the image until it is upright, and it will save it back to the image file for you. There's probably some equivalent function if you happen to be using some other system.

Mary-ashley Holtz
Mary-ashley Holtz
2,398 Points

Hi Steven,

Fantastic idea! However, the image is rotated properly (i.e. portrait style) in its original form, so that is why I am confused as to why it was flipped and is now laying sideways.

Thanks for your help! Mary-ashley

I checked both your "mash.jpg" and "mashley.jpg" and the images themselves are both rotated.

I would use some kind of image editor to rotate them and I would also scale them down. They're both 2560x1440 and I think the about image in this project is scaled down to 150px. Nick's image is 512x512 for comparison.

The other thing is that you probably would want to crop the images square if you want your photo to be a circle like Nick's is. Otherwise, they'll be oval.

Mary-ashley Holtz
Mary-ashley Holtz
2,398 Points

I fixed it! Thank you all for your aid and input. I just added the css code "transform: rotate(279deg);" and the image has rotated properly.

Thank you!