Solved

How to force a tablet to display wide

Posted on 2013-11-28
15
178 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
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
 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Autoprefixer and text editors 1 31
.php tree directory? 5 70
Input box width 6 25
Change of column alignment in div 2 18
"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
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... …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

815 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

13 Experts available now in Live!

Get 1:1 Help Now