Media Queries / Responsive Design Not Working On All Tablets

[thegingerkid]

My site's responsive design kicks in and works perfectly on laptops, desktops, phones (from what I've seen) and good tablets . However, I have a cheapie Windows 8 tablet and the conditional CSS does not work on that, nor does it work on my cousin's old ipad 3. It simply shows the normal desktop version of the site, which is fine for the main page but problematic for the photo galleries (and it's a photo portfolio so that's a major problem).

 

I've copied my main CSS code below. If I duplicate all of the media queries in this file but change max-width to max-device-width, the responsive vertical design does kick in in portrait mode. However, landscape / horizontal view still shows the desktop version. Attempts to fix this by bumping up the max-device-width to 2000px do technically work for the tablet but also affect the normal desktop browser view, so that isn't a viable option.

 

Is there any way to specifically target all mobile devices, both landscape and portrait views, without having it affect how the site is viewed on a laptop or desktop?

/**  Disable Minimum width of no responsive mode         **/



#column-content {

min-width : 0;

}



.hidden {

display: none;

visibility: hidden;

}



.visible-phone {

display: none !important;

}



.visible-tablet {

display: none !important;

}



.hidden-desktop {

display: none !important;

}



.visible-desktop {

display: block !important;

}







/* Portrait tablet to landscape and desktop */

@media screen and (max-width: 979px) {





    .hidden-desktop {

    display: block !important;

    }

    .visible-desktop {

    display: none !important ;

    }

    .visible-tablet {

    display: block !important;

    }

    .hidden-tablet {

    display: none !important;

    }



}





/* Phone and little tablet */

@media screen and (max-width: 767px) {





    .hidden-desktop {

    display: block !important;

    }

  .visible-desktop {

    display: none !important;

    }

 .visible-tablet {

    display: none !important;

    }

    .hidden-tablet {

    display: block !important;

    }

    .visible-phone {

    display: block !important;

    }

    .hidden-phone {

    display: none !important;

    }

    

}





/**             MAIN MENU

**

**                you can change the value for max-width below ( don't forget to put the same value in "css/ie8-responsive.css" and "css/ie7-responsive.css" )

**/







@media screen and (max-width: 979px) {

    

    .drop-down {

    position: relative;

    float: none;

    margin:0;

    padding:0;

    width: auto;

    height:auto;

    z-index: 10;

    }

    

    /* Disable position fixed for header */

    

    .website-header {

    height:auto;

    }

    

    .website-header.fixed {

    position:relative;

    top:0;

    }



    .website-top.fixed {

    position:relative;

    top:0;

    }



    .website-top.fixed.with-header {

    top:0px;

    }

    

    .website-middle.fixed {

    margin-top: -150px;

    padding-top:0;

    }



}



@media screen and (max-width: 979px) {



    .website-footer.footer-home-page {

    position : relative;

    top:0;

    left:0;

    width:auto;

    }

    

    .empty-space-home-page {

    height:100%;

    }



    /**     remove the fixed width of Google map         **/

    

    div[id*="googlemap"] {

    width:auto !important;

    }

    

    /**     Video and Google map         **/

    

    .module_video {

    margin-top: 0;

    padding-bottom: 60px;

    position:relative !important;

    height: 400px !important;

    min-height:400px !important;

    }

    

    .module_google_map {

    margin-top: 0;

    position:relative !important;

    height: 50% !important;

    min-height:50% !important;

    }

    

      /**         Column menu             **/

      

    #column-menu {

    position:relative;

    min-height:0;

    }

    

    .menu-white #column-menu {

    background-color : #8C001A;

    }

    

    .menu-black #column-menu {

    background-color : #000;

    }

        

    #main-column-menu {

    padding: 10px;

    background-color : #8C001A;

    }



    #column-menu, .nav_main, .search-module {

    width:auto;

    }



    

    .logo {

    padding:0 0 0 40px;

    margin: 0;

    float:left;

    }

    

    .logo span {

    line-height:48px;

    }

    

    .logo img {

    max-height : 55px;

    }

    

    h4.customlogo {

    color: #fff;

text-align: left;

width: 300px;

}



p.customlogo {

color: #fff;

text-align: left;

}

    

    #translate {

    position: absolute;

    bottom: -30px;

    right: 35px;

    }

    

    .social-links li a img {

    width:20px;

    }



 

    /**         Column content               **/

    

    #column-content {

    position:relative;

    min-height : 0;

    margin:0;

    }

    

    .module_google_map, .module_video {

    padding-left: 0;

    }

    

    #column-content > .top, #column-content > .bottom, #column-content > .full_width {

    position: relative;

    top:0;

    left:0;

    max-width:100%;

    }

    

    #column-content > .top .all-content {

    margin-bottom:0px;

    }

    

    #column-content #main-column-content .all-content {

    padding: 50px 16px 14px 16px;

    min-height:600px;                 /**        second condition if height > 800px line 390 in this file     **/

    }

    

    .shadow-corner > .bottom {

    min-height:0px;

    background-image : none;

    padding:0;

    }

    

    .shadow-corner > .top {

    min-height:0px;

    background-image : none;

    padding:0;

    top:0;

    }



    /**     CONTENT     **/

    

    

    .left_column, .right-module-position, .top-module-position, .bottom-module-position {

    float:none;

    padding: 12px 0 12px 0;

    margin:0;

    background-image:none;

    border:none;

    width : auto ;

    clear:both;

    }

    

    .left_column > div, .right-module-position > div {

    background-image:none;

    padding:0;

    }

    

    

    .right_column {

    overflow:visible;

    }

    

    .left_column .moduletable > div, .right-module-position .moduletable > div {

    clear:both;

    border:1px solid #ddd;

    margin:0 ;

    background: transparent url(../images/black-03.png) 0 0 repeat;

    }

    

    .white-text .left_column .moduletable > div, .white-text .right-module-position .moduletable > div {    

    border:1px solid #666;

    }

    

    .main_component {

    padding: 0 6px;

    }

    

}



/*        To display the background on all screen if tablet with portrait mode     */

/*        First condition if height < 800px line 266 in this file                 */



@media screen and (max-width: 979px) and (min-height: 800px) {



    #column-content #main-column-content .all-content {

    min-height:900px;

    }

    

}    



/* Phone and little tablet */

@media screen and (max-width: 767px) {



    .logo {

    padding-left :0px;

    }

    

    .top_menu li {

    padding: 4px 2px 0 2px;

    }

    

    .user1, .user2, .user3, .user4, .user5, .user6, .right-module-position {

    float:none;

    padding:12px 0;

    margin:0;

    width : 100% !important;

    clear:both;

    }

    

    .user1, .user2, .user3, .user4, .user5, .user6 {

    margin : 8px 0 0 0;

    }

    

    .top-module-position .border > div, .bottom-module-position .border > div, .user1 .border > div, .user2 .border > div, .user3 .border > div, .user4 .border > div, .user5 .border > div, .user6 .border > div,

    .address .border > div, .translate .border > div, .search .border > div, top_menu .border > div, .bottom_menu .border > div {

    margin-bottom:8px;

    }

    

    .moduletable.shadow > div {

    margin-bottom:0 !important;

    }

    

    

    /**********        Column layouts            *********/



    .one-half, .one-third, .two-third, .one-fourth, .two-fourth, .three-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth {

    float: none;

    width:auto;

    margin : 10px 0;

    }

    

}

[dsonesuk]

Iphone come in many sizes which is why you use specific media to target widths and orientation of specific versions, so the same should apply to target windows 8 phone.

 

This is the first google search i found which covers orientation for devices included for iphone versions.

 

http://blog.templatemonster.com/2014/10/14/css-media-queries-for-all-devices-and-browsers-including-ie7-and-ie8/

[thegingerkid]

Thanks, but these seem to just be using width/height to identify the type of screen, which I have tried. The problem is that if I set the max-width or max-device-width high enough to work in landscape mode for the tablet, it then is also applying to the regular browser view on the desktop/laptop (in other words, full screen Firefox on my laptop is showing in responsive mode). I was hoping the "device" part would target only mobile devices and make that code irrelevant for laptops and desktops but it seems not...

[davej]

Why don't you write a simple test to see if the browsers in those devices respond to media queries?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<!--[endif]-->
<title>media queries</title>

<style>

@media screen and (max-width: 100px) {
#out0::after {
 content: " less than 100px";
} 
}
@media screen and (min-width: 101px) and (max-width: 200px) {
#out0::after {
 content: " between 101px and 200px";
} 
}
@media screen and (min-width: 201px) and (max-width: 300px) {
#out0::after {
 content: " between 201px and 300px";
} 
}
@media screen and (min-width: 301px) and (max-width: 400px) {
#out0::after {
 content: " between 301px and 400px";
} 
}
@media screen and (min-width: 401px) and (max-width: 500px) {
#out0::after {
 content: " between 401px and 500px";
} 
}
@media screen and (min-width: 501px) and (max-width: 600px) {
#out0::after {
 content: " between 501px and 600px";
} 
}
@media screen and (min-width: 601px) and (max-width: 700px) {
#out0::after {
 content: " between 601px and 700px";
} 
}
@media screen and (min-width: 701px) and (max-width: 800px) {
#out0::after {
 content: " between 701px and 800px";
} 
}
@media screen and (min-width: 801px) and (max-width: 900px) {
#out0::after {
 content: " between 801px and 900px";
} 
}
@media screen and (min-width: 901px) and (max-width: 1000px) {
#out0::after {
 content: " between 901px and 1000px";
} 
}
@media screen and (min-width: 1001px) {
#out0::after {
 content: " greater than 1000px";
} 
}
</style>
<script>
window.onload = function(){
setInterval(put,1000);
put();
}
function put(){
var txt = '<br/>Javascript reports window width: '+ window.innerWidth +'px';
document.getElementById('out1').innerHTML = txt;
}

</script>
</head>

<body>

<div id="out0">
CSS reports width is
</div>

<div id="out1">
</div>

</body>
</html>

[Ingolme]

The idea behind responsive design is to be device-independent. If two devices have the same screen size then you should be rendering the page the same for both of them. Why would you want to show it differently?

[thegingerkid]

Ingolme - but that's exactly the problem. The devices are NOT the same size. Even oriented for landscape, my tablet is just over half the size of my laptop screen. Even if they were closer in size, the photo galleries are set differently for touch devices. On a laptop or desktop, the galleries display as slideshows with hovering controls. On touch devices, it's a pain for people to keep tapping the screen to go from one image to the next, so the images all display in-line instead of as a slideshow. Furthermore, the site is supposed to switch to the vertical responsive design from 979px width downwards, which it seems to do on phones and most tablets, but is for some reason not doing on my cheapie Windows 8 tablet (not even in portrait mode) or an older ipad 3, which are roughly the same size as the other tablets where it worked just fine.

 

dave - Thanks for the suggestion! I already know that the tablet recognizes media queries since as I said, the responsive design works if I kick up max-device-width to 2000px (although at that point, it also changes the standard laptop view too, which isn't good). However, I did upload a test page with the code you offered and got this on my laptop:

 

CSS reports width is greater than 1000px

Javascript reports window width: 1600px

I then tried it on my tablet in landscape view and got:

CSS reports width is greater than 1000px

Javascript reports window width: 1024px

Not sure where to go with that!

[Ingolme]

You can use a media query of max-width 1024 to target the tablet and devices smaller than that.

[thegingerkid]

I know, and I just did that so it's working on the tablet now. But as I said, that also affects the desktop view. I really didn't want this vertical layout for larger size non-mobile windows. That's why I was hoping there was a way to specifically target mobile devices - or even better, target touch devices (which is what I was able to do when setting conditional javascript for the galleries) - instead of relying on a general width parameter.

Edited March 22, 2016 by thegingerkid

[Ingolme]

If the desktop is larger than 1024 pixels then the styles for tablet should not affect it.

[thegingerkid]

But sometimes people have their browsers shrunk down to a smaller size. Personally, I'm the type of person who has all windows at maximum all the time, because I don't like having various resized windows on the screen, but not everyone is the same. Some folks, especially Mac users from what I've seen, tend to have windows at half or 3/4 screen view, and I didn't really want the site going into the vertical layout above a particular (lower) width. Unfortunately, it sounds like you're telling me that, unlike the javascript for the galleries, media queries can't specifically target touch devices or identify things like tablets, so general dimension parameters are the only - somewhat inaccurate - way of estimating the appropriate design to use.

[dsonesuk]

The idea is to determine how the layout will look depending on width of device, the minimum being 320px, largest being 1200 device width, but the media query on determining the size of screen 1200 will set a fixed centred container element width to around 1150px, then you can fix to this width for larger screens greater than 1200.

 

You have more control of the layout if you set the container width to a fixed width and then centre it as it progress up device width for example bootstrap device width 992px and greater will have centred container width of 970, device greater than 768px will have 750px, while device < than 768px will become fluid to fill available width.

 

You just have to make the content within these containers fluid, and by using min-width of 300-320 you will able to stack these and centre these when required, down to extra small devices.

 

Also now that the container is restricted in its fluidity by stages from 768 to 992 and 922 to 1200 you can manage the layout design depending on adjusted container fixed sizes instead of adjusting the layout and making elements fit for each pixel from 320 all the way to 1200..

 

Edit: I suppose you HAVE included viewport density etc

<meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />

Edited March 22, 2016 by dsonesuk

[davej]

There appears to be a trick available in Javascript to detect touchscreens.

 

http://stackoverflow.com/questions/11387805/media-query-to-detect-if-device-is-touchscreen

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>title</title>
<style>
.touch .touch{
 color:red;
}
.touch .notouch{
 display:none;
}
.notouch .notouch{
 color:red;
}
.notouch .touch{
 display:none;
}
</style>
<script>
window.onerror = function(a,b,c){
alert('Javascript Error: '+a+'\nURL: '+b+'\nLine Number: '+c);
return true;
}
</script>
<script>
'use strict';
window.onload = function(){
if( 'ontouchstart' in document.documentElement ){
  document.getElementsByTagName('BODY')[0].className += ' touch';
}else{
  document.getElementsByTagName('BODY')[0].className += ' notouch';
}
}
</script>
</head>

<body>

<div class="touch">
<h3>Touchscreen</h3>
</div>

<div class="notouch">
<h3>No Touchscreen</h3>
</div>

</body>    
</html>