Media Query for kindle Fire not working

sorry about my English…

I have this code ;

@media only screen
    and (min-width: 37.5em)
    and (max-width: 39em)
    and (orientation: landscape)
    and (-webkit-min-device-pixel-ratio: 2) {

   body {
     
          display: grid;
          grid-template-columns: 18% 73% 13%;
          grid-template-rows: auto auto 70vh auto;
          grid-gap: 5px;
          grid-template-areas:
           "header  header  header"
           "nav     nav     nav"
           "linkBox main    main"
           "footer  footer  footer";
    }
     body > main {
     height: 70vh;
   }
   .link_change ul {
       margin-left: 300px;
   }
        
}

but nothing to change on Fire 7…

Can please anyone help me , Thanks !

Is the problem you’re seeing in Amazon’s Silk browser, or in Chrome on a Fire tablet?

Tanks for you answer !

Is the problem you’re seeing in Amazon’s Silk browser, or in Chrome on a Fire tablet?

not , i to search it from my Firefox Browser , with a emulator

So you are not actually looking at the page on a Fire tablet?

yes , i have not a Tablet therefore i to do with an emulator…

I have on this Website too Apple ipad and google Nexus to try with this Code;

body{
    background-color: #ebf5d7;
    grid-gap: 5px;
    grid-template-columns: 11% 72% 17%;
    grid-template-areas:

    "header   header   header"
    "nav      nav      nav"
    "linkBox  linkBox  linkBox"
    "main     main     main"
    "infoBox  infoBox  infoBox"
    "footer   footer   footer" ;
    
}

@media screen and (min-width: 80em) {
  
    body {
     
      display: grid;
      grid-template-columns: 9% 72% 18%;
      grid-gap: 5px;
      grid-template-areas:
       "header  header  header"
       "nav     nav     nav"
       "linkBox main    infoBox"
       "footer  footer  footer";
    }
}

/* Tablet Nexus Width */

@media screen and  (min-width: 39.6875em) and (max-width: 63em) {
  body {
    display: grid;
    grid-template-columns: 11% 75% 14%;
     grid-gap: 5px;
    grid-template-areas:
    "header  header  header"
    "nav     nav     nav"
    "linkBox main    main"
    "footer  footer  footer";
  }
  
}

/* Tablet Nexus Portrait */

@media screen and (min-width: 30em) 
              and (max-width: 38.6875em) 
              and (orientation: portrait){
    body {
     
      display: grid;
      grid-template-columns: 17% 70% 13%;
      grid-template-rows: auto auto 70vh auto;
      grid-gap: 5px;
      grid-template-areas:
       "header  header  header"
       "nav     nav     nav"
       "linkBox main    main"
       "footer  footer  footer";
    }
    body > main {
     height: 70vh;
   }

    #name {font-size: 0.655em;}
    #email {font-size: 0.655em;}
              
}


/* Apple iPad mini (Kleine Tablet) 1024x768 , Landscape  */

@media screen and (min-width: 63em) and (max-width: 79.125em) {
   body {
     
      display: grid;
      grid-template-columns: 11% 76% 13%;
      grid-template-rows: auto auto 70vh auto;
      grid-gap: 5px;
      grid-template-areas:
       "header  header  header"
       "nav     nav     nav"
       "linkBox main    main"
       "footer  footer  footer";
    } 
    body > main {
      height: 70vh;
   }
    #name {font-size: 0.50em;}
    #email {font-size: 0.50em;}
    
}


/* Apple iPad mini (Kleine Tablet) 1024x768 , Portrait  */

@media screen and (min-width: 48em) and (max-width: 55em) {

   body {
     
          display: grid;
          grid-template-columns: 13% 77% 10%;
          grid-template-rows: auto auto 70vh auto;
          grid-gap: 5px;
          grid-template-areas:
           "header  header  header"
           "nav     nav     nav"
           "linkBox main    main"
           "footer  footer  footer";
    }
     body > main {
     height: 70vh;
     
   }
}

and all working…

Screenshot from Apple ipad

… and Nexus…

Fire tablets come in various sizes…use the resource below to set multiple break points in your media queries:
https://developer.amazon.com/docs/fire-tablets/ft-screen-layout-and-resolution.html

thanks for your links , i to search with Fire 7 all possibility because the emulator from them it is … but without occur… i will to try with the sizes from your Links , i will your answer what answer to come …

from here i have all Amazon drive to try ,

  • Amazon Kindle Fire (1st generation)
    i to see gut

  • Amazon Kindle Fire (2nd generation)
    i to see gut

  • Amazon Kindle Fire HD 7″ (2nd generation)
    i can not see gut

  • Amazon Kindle Fire HD 7″ (3rd generation)
    i can not see gut

  • Amazon Kindle Fire HD 8.9″ (2nd generation)
    i see gut

-Amazon Kindle Fire HDX 7″ (3rd generation)
Landscape see gut , but Portrait below from bottom , there is place

  • Amazon Kindle Fire HDX 8.9″ (3rd generation)
    Landscape see gut , but Portrait below from bottom , there is place

I have with and without with this Code to try

@media only screen
    and (min-width: 37.5em)
    and (max-width: 39em)
    and (orientation: landscape)
    and (-webkit-min-device-pixel-ratio: 2) {

   body {
     
          display: grid;
          grid-template-columns: 18% 73% 13%;
          grid-template-rows: auto auto 70vh auto;
          grid-gap: 5px;
          grid-template-areas:
           "header  header  header"
           "nav     nav     nav"
           "linkBox main    main"
           "footer  footer  footer";
    }
     body > main {
     height: 70vh;
   }
   .link_change ul {
       margin-left: 300px;
   }
        
}

so , i have to try more values and every time does nothing…i can not working it with css…

I’m curious why you’re testing those? 1st gen is 2011, 2nd gen 2012, 3rd gen 2013. It not surprising that it doesn’t properly support something that only really got full support in 2017.

Plus it’s almost impossible to get a good list of supported features for Silk. From a quick Google, the Can I Use website doesn’t track it at all. Bootstrap doesn’t support it. It doesn’t work, architecturally, like other browsers. The version of Chromium used is unknown without digging into the code (as it’s proprietary, that seems to be non-trivial). The AWS documentation is almost nonexistent. Usage is tiny (fire is a super low budget tablet with almost no market share).

I’m curious why you’re testing those?

because more people can see my Website

What recommend you me and this problem to solve ?

If you’re desperate for it to work on old, barely-used devices and browsers, don’t use APIs that were only introduced in the last few years (like CSS grid).

Look at the dates: CSS grid became widely supported two years ago. Those devices are 6, 7 and 8 years old and ship with a proprietary browser and operating system that has almost no documentation. It is difficult to find what is supported because no-one really bothers to test for it any more.

More sensibly, decide what you want to support. You can make it work on every browser, all the way back to ones from the 1990s, but you decide whether you need to do that

1 Like

You’re obviously free to code your site as you want, but it’s probably fair to assume that this isn’t going to be a site where thousands of unique users land - maybe not even hundreds. So it honestly feels like spending hours and hours writing a media query for a device that may never be used to access your site seems entirely counterproductive as @DanCouper has mentioned whilst I was replying.

I could understand it, if it was a site, say, about Kindle Fire hacking, which might get low views, but of those the amount visiting with Fire devices might be high. Your site however seems to be a fairly standard landing page.

If it’s for practice then carry on, but I’d just add a media query with minimal styling and pleasant layout for older/weirder devices. There doesn’t appear to be anything on your homepage currently which couldn’t be achieved with fairly bog standard html.

Thanks for yours counsel , i will now to try more Nexus service…

If you want to give good support for old devices and still use CSS grid for newer devices you have to use some sort of progressive enhancement (or graceful degradation).

Google: progressive enhancement css grid

1 Like

First , very thanks for your counsel !

I know that i muss manyyy more learn … ,My problem is that i have not many time… , i work as logistic , clean ,… and because i am full from this shit work’s… my Idea is working my Website and with advertising to living… i will not rich to become :wink: , only a easy living without luxury (700 or 800 euros by Months…) , a live without Boss , where i will , now living on a Big City and i will in the countryside …:deciduous_tree:

Progressive enhancement is what now does with Kindle Fire… :wink: