How to force a tablet to display wide

How do you force a tablet computer to display wide?
burnedfacelessAsked:
Who is Participating?
 
GaryCommented:
On the contact page you have
<style type = "text"/"css">

should be
<style type = "text/css">

Don't know how you ended up with the extra "
0
 
GaryCommented:
Are you using media queries?
You could detect if in portrait mode with the media query
orientation:portrait

and then rotate the whole web page buy targeting the body tag with
-webkit-transform: rotate(90deg);
0
 
burnedfacelessAuthor Commented:
I want it to display landscape even if the user holds it vertically.

I read I could use body{orient= "landscape";} Syntax might be off.

This would be placed in a media query. Which min width media query would cover tablets?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
burnedfacelessAuthor Commented:
Here's what happens when I flip the iPad vertical it displays desktop and mobile elements.

When I flip it horizontally it displays fine.
0
 
GaryCommented:
Try this, not sure if it will work or not

@media all and (orientation:portrait){
body {
-webkit-transform: rotate(90deg);
}
}
0
 
burnedfacelessAuthor Commented:
I pasted your code in and it didn't work.

Here is what I tried that didn't work

@media (min-width: 768px) and (max-width: 979px) and (orientation = portrait) {body {orientation:landscape}}}
0
 
GaryCommented:
That's not what I posted

I don't know what you are trying to do with
body {orientation:landscape}

Its not CSS
0
 
burnedfacelessAuthor Commented:
I pasted it from a site. It didn't look familiar.

The problem is the page doesn't render in portrait mode and I don't have time to go more in depth.

How would you recommend solving this?

edit: realized i mistyped tablet
0
 
GaryCommented:
Did you try this

@media all and (orientation:portrait){
body {
-webkit-transform: rotate(90deg); 
}
} 

Open in new window


I edited your question title
0
 
burnedfacelessAuthor Commented:
Yes, didn't work.
This didn't either

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
  body {
    -webkit-transform: rotate(90deg);
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }
}

https://coderwall.com/p/q79kaq
0
 
burnedfacelessAuthor Commented:
I should add I'm working out of the bootstrap css but that shouldn't make a difference if placed last.
0
 
GaryCommented:
Try this

@media all and (orientation:portrait){
body {
transform: rotate(90deg); 
}
} 

Open in new window

0
 
burnedfacelessAuthor Commented:
I've actually found out it works sometimes but only when there are no other media queries.

So if you can answer how do I negate the queries or even better write them where they are all compatible I will award points.
0
 
GaryCommented:
Are you sure it is the very last query - after all the other css.
Have you a link to the page?
0
 
burnedfacelessAuthor Commented:
Gary thanks for your patience I have two issues:

1. http://conutils.com/dist will provide examples if you have an iPad. The contact page is the only one that doesn't work. The index of dist actually has media queries but I put them in the stylesheet for some reason. I really don't remember why because it had to do with that page.

2. I want this to happen on every single tablet device. So should I just go with what bootcamp recommends?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.