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

CSS

Posted by Alex Tiburzi
Alex Tiburzi
1,179 Points

My photo on about.html has the wrong orientation on my browser, but is perfect on my mobile web

Any suggestions as to how I can fix it without messing up the way it looks like on my phone? https://w.trhou.se/qpvwpwt5fg

2 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

I tried several phone simulators in Chrome, but the image orientation was always sideways. I couldn't see how it would look right on a phone (unless the text was sideways).

But, assuming you just want to rotate the image, and only on large screens, you could do this with a media query:

@media screen and (min-width:799px) {
  .Profile-Photo {
    transform: rotate(90deg);
  }
}

You may need to adjust the breakpoint. You may also want to add a size limitation or some padding to account for the browser doing the layout before the rotation is applied.

FYI :point_right: I also noticed that you're missing a semicolon on line 61 of main.css.

Errin E. Johnson
Errin E. Johnson
22,458 Points
Errin E. Johnson
Errin E. Johnson
22,458 Points

Im not able to pull up your work space but your pic will be 90 deg - sideways. Remove the rotation and your pic will no longer be sideways. I apologize but I don't have enough information. I don't know why you are using the rotate 90deg. If your img profile pic is not showing properly, remove all style and or animation and build style from there.