0

Having an issue with the homepage I'm currently trying to complete for this site (http://purcraft.com/madeinla/home5.html) where due to the aspect ratio, I want to make certain this gets forced into landscape mode. Not ideal, but it just will leave a ton of white space in portrait.

Heard you could do this using CSS3 but this code isn't working perfectly. On devices, it seems to stretch the div out a bit when you're in portrait and on a desktop, you see the effect once you hit 1280px. Very odd. How can I really make this work or should I just use some JavaScript instead?

Here's the CSS I'm currently using:

@media only screen and (orientation:portrait){
    #made-in-la-canvas {  
        display:block;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}
@media only screen and (orientation:landscape){
    #made-in-la-canvas {
        display:block;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
Adam Bell
  • 1,049
  • 1
  • 16
  • 50
  • You may be need to define `transform-origin` property. – Gaël Barbin Apr 20 '15 at 04:21
  • possible duplicate of [How do I lock the orientation to portrait mode in a iPhone Web Application?](http://stackoverflow.com/questions/1207008/how-do-i-lock-the-orientation-to-portrait-mode-in-a-iphone-web-application) – Gaël Barbin Apr 20 '15 at 04:21

1 Answers1

1

If I were a web designer, I wouldn't force landscape or portrait onto people. I would instead account for portrait in your site's interface. I don't think Mobile Safari can be forced in landscape, because some users can simply turn on Portrait Orientation Lock through Control Center.

DDPWNAGE
  • 1,423
  • 10
  • 37