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

Posted by James Bell
James Bell
3,478 Points

Profile photo rotated 90 degrees to left

I followed the coding exactly in both the HTML and CSS files, making sure to check the class. I am using google chrome. I added my own picture to the work space and put in the correct file path. For some reason it rotates my phone 90 degrees to left, where once my face was right side up, it is now sideways. Any ideas why this is happening or how I can fix it?

Matthew Lang
Matthew Lang
13,483 Points

Hey!

Could you reference the code you are using to include the image, and any css it may have also?

James Bell
James Bell
3,478 Points

Here is a snap shot of the workspace. It is on the about page. This was the first project in the Front-End Development track https://w.trhou.se/di56uh5nks

1 Answer

Matthew Lang
Matthew Lang
13,483 Points

CSS Transform Property

Phones tend to store the orientation of photos landscape by default (though not all). Thanks to the CSS transform property, we are able to change the rotation of an element.

.profile-photo {
  display: block;
  max-width: 200px;
  margin: 0 auto 30px;
  border-radius: 35px;
  /* The line of code below rotates your .profile-photo element by 90 degrees. */
  transform: rotate(90deg);
}

You can read more about this property here.

Also, another solution would be to use an image-editor to simply rotate your picture to be portrait, as if you examine your image it is indeed landscape.

I hope I helped! :)