3 Replies - 364 Views - Last Post: 31 March 2020 - 02:32 PM

#1 ccrandall   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 31-March 20

Phones aren't responding to @media in css

Posted 31 March 2020 - 01:52 PM

I have been working on the front end to a database site http://diabeticlog.org, and on the computer all of my css works, including the @media tags when I use virtual phones and resize my browser screen. but every phone that I have gotten to try it on the @media tags aren't working at all. I have tried rewriting the entire css a few times and have been scouring the web looking to see if I made an error with the code with no avail. The css is as follows:

#viewMain {

font-family:blambotCasualBold;
color: rgb(131,139,131);
font-size:1vmax;
position: absolute;
background-color: rgb(255,228,181);
top: 10%;
left: 10%;
width: 79%;
height: 88%;
z-index:1010;
border-style: groove;
border-color: rgb(139,136,120);
overflow-y: scroll;
overflow-x:no-content;

}

#homeFoodImg {
  
  width: 10%;
  position: absolute;
  left: 25%;
  
  }

    #homeMedsImg {
  
  width: 10%;
  position: absolute;
  left: 45%;
  
  }

    #homeDocsImg {
  
  width: 10%;
  position: absolute;
  left: 65%;
  
  }

  .homeImage {
  
  top: 45%;
  cursor:pointer;

  }

  #toolTip {
  
  display: none;
  position: absolute;
  background-color: rgb(188,143,143);
  border-style: groove;
  border-color: rgb(139,136,120);
  color: rgb(46,139,87);
  font-size:.8vmax;
  z-index: 10000;

  }

@media screen 
  and (orientation: portrait) {    /* This is the on @media that works on the phones */

  #homeFoodImg {
  
  height: 10%;
  position: absolute;
  top: 40% !important;
  
  }

    #homeMedsImg {
  
  height: 10%;
  position: absolute;
  top: 60% !important;
  
  }

    #homeDocsImg {
  
  height: 10%;
  position: absolute;
  top: 80% !important;
  
  }

  .homeImage {
  
  left: 45% !important;

  }

  }


@media screen and (max-width: 800px) and (orientation: portrait) {
  
  #viewMain {
  
  width: 60% !important;
  left: 20% !important;

  }
  
  }

  @media screen 
  and (max-width: 580px) 
  and (orientation: portrait) {
  
  #viewMain {
  
  
  width: 40% !important;
  left: 30% !important;
  }
  
  }

  @media screen and (max-height: 800px) and (orientation: portrait) {
  
  #viewMain {
  
  height: 79%  !important;
  top: 20%  !important;
 
  }
  
  }




#header {

font-family:junglerock;
color: rgb(50,205,50);
font-size:4vmax;
position: absolute;
background-color: rgb(139,115,85);
top: 0%;
left: 0%;
width: 100%;
height: 10%;
z-index:1000;

}

#l678lkj {

display: none;

}

@media screen and (max-width: 580px) and (orientation: portrait) {
  
  #header {
  
  height: 15%;
  font-size:2vmax;

  }
  
  }




#menu {

color: rgb(176,196,222);
font-size:1.5vmax;
position: absolute;
background-color: rgb(139,115,85);
top: 10%;
left: 0%;
width: 10%;
height: 89%;
z-index:1000;

}

.menuItem {

cursor:pointer;

}

.menuItem:hover {

font-size:1.75vmax;
color: rgb(60,179,113);

}

@media screen 
  and (max-width: 800px) 
  and (orientation: portrait) {
  
   #menu {
  
  width: 15%;

  }
  
  }

  @media screen 
  and (max-width: 580px) 
  and (orientation: portrait) {
  
   #menu {
  
  top: 15%;
  height: 84%;

  }
  
  }




Is This A Good Question/Topic? 0
  • +

Replies To: Phones aren't responding to @media in css

#2 astonecipher   User is offline

  • Enterprise Software Architect
  • member icon

Reputation: 3136
  • View blog
  • Posts: 11,945
  • Joined: 03-December 12

Re: Phones aren't responding to @media in css

Posted 31 March 2020 - 02:20 PM

Are you using the viewport meta tag as well?
Was This Post Helpful? 1
  • +
  • -

#3 ccrandall   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 31-March 20

Re: Phones aren't responding to @media in css

Posted 31 March 2020 - 02:24 PM

View Postastonecipher, on 31 March 2020 - 02:20 PM, said:

Are you using the viewport meta tag as well?


No I have never heard of the viewport meta tag.
Was This Post Helpful? 0
  • +
  • -

#4 ccrandall   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 31-March 20

Re: Phones aren't responding to @media in css

Posted 31 March 2020 - 02:32 PM

Thank you, that is exactly what I needed. for anyone else who hasn't heard of it the code for the meta tag is as follows

<meta name="viewport" content="width=device-width, initial-scale=1.0">



Was This Post Helpful? 0
  • +
  • -

Page 1 of 1