How to make my website work on tablets?

Question

I've finally worked my website on mobile phones, landscape and portrait, but I still am not being able to work it on tablets!

I've used media queries to make my website work on mobile phones, here's what I did:

@media screen and (max-width: 1024px) {
 
 body{
  position: relative;
  left: 100px;
 }
 .pintro{
  position: relative;
  top: 180px;
  width: 500px;
 }
 .hintro{
  position: relative;
  top: 180px;
 }
 
    /* The rest of my code */
}



@media screen and (max-width: 1024px) and (max-height: 400px) {
 body{
  font-family: 'Noto Sans', sans-serif;
  background: url("nature-blur-tree-greenex.jpg") no-repeat center center fixed;
  width: 100%; 
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  right: 8%;
 }
 
 .pintro{
  position: relative;
  line-height: 50px;  
  left: -100px;
 }

 /* The rest of my code */
}

I then tried doing that with tablets, in this form:

@media only screen and (min-device-width: 768px){
 .footer{
  position: reltive;
  top: 1000px;
 }
}

But, that didn't work. I would be very grateful if someone provided me with a media query which I can put in my CSS for my site to work on tablets.

Thanks.

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ — Isabel Inc, Jul 26 '16 at 19:07
Your question is very broad. There are many possible answers. Consider managing your breakpoints based on the content of your site: http://stackoverflow.com/q/8564752/3597276 — Michael Benjamin, Jul 26 '16 at 19:07
Thanks Isabel Inc, your link was very useful, and it worked. — Ned29, Jul 26 '16 at 19:14

score 0 · Accepted Answer · answered Jul 26 '16 at 19:15

try using this codepen

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* iPhone 6 landscape */
@media only screen and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2)
{ }

/* iPhone 6 portrait */
@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2)
{ }

/* iPhone 6 Plus landscape */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 3)
{ }

/* iPhone 6 Plus portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 3)
{ }

/* iPhone 6 and 6 Plus */
@media only screen
  and (max-device-width: 640px),
  only screen and (max-device-width: 667px),
  only screen and (max-width: 480px)
{ }

/* Apple Watch */
@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm)
{ }

you're welcome, I haven't had a problem yet with 90 websites. — mlegg, Jul 28 '16 at 14:24

How to make my website work on tablets?

1 Answers1