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
Mary-ashley Holtz
2,398 PointsImage 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?
Mary-ashley Holtz
2,398 PointsHi 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
Jason Anello
Courses Plus Student 94,610 PointsHi 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
Courses Plus Student 15,596 PointsMary, 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:
Give us the link that will be generated like you see in the picture.
Mary-ashley Holtz
2,398 PointsHey Michael, Jason- Here is a snapshot of my code https://w.trhou.se/ufqrlnrqyo
1 Answer
Steven Parker
231,248 PointsWhy 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
2,398 PointsHi 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
Jason Anello
Courses Plus Student 94,610 PointsI 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
2,398 PointsI 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!
Michael Afanasiev
Courses Plus Student 15,596 PointsMichael Afanasiev
Courses Plus Student 15,596 PointsHi Mary,
Could you post your code? you can use the Markdown Cheatsheet to see how.