Solved

How to force a tablet to display wide

Posted on 2013-11-28
15
176 Views
Last Modified: 2013-11-29
How do you force a tablet computer to display wide?
0
Comment
Question by:burnedfaceless
  • 8
  • 7
15 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39684357
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
 

Author Comment

by:burnedfaceless
ID: 39684391
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
 

Author Comment

by:burnedfaceless
ID: 39684409
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
 
LVL 58

Expert Comment

by:Gary
ID: 39684418
Try this, not sure if it will work or not

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

Author Comment

by:burnedfaceless
ID: 39684421
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
 
LVL 58

Expert Comment

by:Gary
ID: 39684423
That's not what I posted

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

Its not CSS
0
 

Author Comment

by:burnedfaceless
ID: 39684428
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 58

Expert Comment

by:Gary
ID: 39684432
Did you try this

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

Open in new window


I edited your question title
0
 

Author Comment

by:burnedfaceless
ID: 39684445
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
 

Author Comment

by:burnedfaceless
ID: 39684446
I should add I'm working out of the bootstrap css but that shouldn't make a difference if placed last.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39684457
Try this

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

Open in new window

0
 

Author Comment

by:burnedfaceless
ID: 39685615
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
 
LVL 58

Expert Comment

by:Gary
ID: 39685633
Are you sure it is the very last query - after all the other css.
Have you a link to the page?
0
 

Author Comment

by:burnedfaceless
ID: 39685716
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39685753
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

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Add space before submit button 3 40
jQuery Time Off Event 20 42
css question 1 32
How do i set padding within the sidebar? 2 10
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now