@media only screen and (min-width)

[yandoo]

Hiya I'm trying to create different styles for different devices i.e smart phones (landscape/portrait) and desktops.

 

I'm using:

 

/* LANDSCAPE STYLES */
@media only screen and (min-width : 321px)

 

/* DESKTOP STYLES */
@media only screen and (min-width : 800px)

 

And i will also be (but not yet as problems getting landscape styles to be called) using:
 

/* PORTRAIT STYLES */
@media only screen and (max-width : 320px)

 

The wierd thing is that when I browse the website using my smart phone in lanscape mode (zoomed out) The landscape styles are never called and instead the desktop style is. I've checked on a few websites and this is apparently the write screen/pixel with: 320px portrait and 480px landscape. Why is it that the desktop styles are used on my smart phone and not the landscape style????

 

If any body could help that would be ace.

 

Heres the code:

/* LANDSCAPE STYLES */
@media only screen and (min-width : 321px) {  

#workshop1{
    width: 30%;
  height: 60%;
    min-width: 0;
    color: #ffffff; font-size: 9px; font-weight:bold;
    border-radius:20px;
 float:left;
  }
  
   #image{
    width: 100%;
    height: 100%;
    min-width: 0;
    height:100%;
  padding-top: 5px;
  margin: auto;
  }
  
  #description{
   width: 90%;
    height: 140px;
    word-spacing:-1px;
  color: #ffffff;
  font-size: 9px;
    font-weight: normal;
  text-align: justify;
 position: relative;
   }
   
   
     #detail {
    width: 80%;
    min-width: 0;
    height:38px;
   word-spacing:-1px;
  text-align: center;
  position: absolute;
  bottom: 10%;
 
  }
  
   #workshop2{
    width: 30%;
  height: 60%;
    min-width: 0;
    color: #ffffff; font-size: 9px; font-weight:bold;
    border-radius:20px;
 float:left;
    margin-left:5%;
  }}



/* DESKTOP STYLES */
@media only screen and (min-width : 800px) { 

#workshop1{
width: 216px;
height:360px;
background-color: #028ec1;
border-radius:25px;
 padding-top: 5px;
 float:left;
  overflow: hidden;
  color: #ffffff; font-size:14px; font-weight:bold;
  }
  
  #image{
width: 216px;
height:135px;
  padding-top: 5px;
  margin: auto;
}

#description{
width: 200px;
height:180px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  word-spacing:-1px;
  color: #ffffff;
  font-size: 13px;
  text-align: justify;
  position: relative;
  font-weight: normal;
}

#detail{
  width: 193px;
height:50px;
   word-spacing:-1px;
  text-align: center;
  position: absolute;
  bottom: 0px;
}

#workshop2{
width: 216px;
height:360px;
background-color: #028ec1;
border-radius:25px;
 padding-top: 5px;
 float:left;
 margin-left:20px;
  color: #ffffff; font-size:14px; font-weight:bold;
  }}

Thank you very much

[Strider64]

First of all make sure you have this in your HTML file

    <!-- IMPORTANT THAT THE FOLLOWING IS INCLUDED -->
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />

Second this is how I go about tackling different screen sizes (media devices):

/* MOBILE NAVIGATION
--------------------------------------------------- */
@media only screen and (max-width: 480px)  {

}

/* TABLET NAVIGATION
--------------------------------------------------- */
@media only screen and (min-width: 481px) and (max-width: 768px) {

}

/* SCREEN NAVIGATION
--------------------------------------------------- */
@media only screen and (min-width: 769px)  {
   
}
 

[yandoo]

Thank you for your reply. The issue was I forgot the meta tag.

 

This has brought up another issue though, if I view the page in medium zoom (default) on my smart phone the page doesnt fit right yet again.. Is there away i can automatically set distance as far and make it so it is not changable?

 

Thank you

[yandoo]

I think i've done just that by modifying the meta and adding a couple of more..

 

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0" />
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,user-scalable=no" />