Menu icon Foundation
Is it possible to control orientation programatically?

I am writing a Rails app and wondered if foundation has the capability to force a specific page to display as landscape on a small screen. I know I can hide and show elements based on orientation, but I would like to control a view so it always displays in a landscape orientation when viewed on a phone.

railsorientation

I am writing a Rails app and wondered if foundation has the capability to force a specific page to display as landscape on a small screen. I know I can hide and show elements based on orientation, but I would like to control a view so it always displays in a landscape orientation when viewed on a phone.

Karl Ward over 5 years ago

There isn't any "orientation view" in Foundation ... The only difference between different orientations may be if they trigger different screen size breakpoints in Foundation. What you really are asking is "Can I use the large screen layout for smaller screens also?". The answer is yes, but then why set up your website to be responsive in the first place?

Ron Huppert over 5 years ago

I know a large screen layout can be used for a small screen. To answer your question, I don't want to throw the baby out with the bath water. Responsiveness is beneficial to the overall use. There is a benefit to users in seeing certain content in a wide aspect ratio. One might think all users would know they can turn the device, but I think a substantial number would scroll only.

Regardless, I appreciate your response and will look to make the site 100% responsive. At the very least, I know I can display a message for the user to turn his small device when it's in portrait for certain pages that might call for it.

Karl Ward over 5 years ago

Keep in mind, there is no "aspect" or anything for a wesbite. Basically, there is a width, and everything will simply scroll vertically. When you flip a device, basically you are just changing the available width for the website. In Foundation, by default you work with 3 screen-width breakpoints small-x, medium-x and large-x. If you want to maintain a large-screen layout also on some tablets and/or some mobile devices in landscape mode, it would make sense to use the medium-x to generally apply your "desktop" layout.

You could also use custom media queries to assign certain CSS styles to specific orientation-modes, but I would not recommend building your main structure around this concept.