I am trying to make one css file for all mobile screen sizes, however on google the media query won't be recognised by smaller phone screens. It works for pixel 2 xl, iphone 6, 7 and 8 PLUS and iphone X. I'm also trying to target pixel 2, iphone 6,7 and 8 and 5 so I added min-device width to be 320 px.But the browser won't recognise any of the mobile.css code.
here is my head tag -
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>SHEK LEUNG | MA</title>
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
<link rel="stylesheet" href="/css/style.css">
<link rel='stylesheet' media='only screen and (min-device-width:320px) and (max-device-width: 850px) and (-webkit-device-pixel-ratio: 3) and (-webkit-device-pixel-ratio: 2)' href='css/mobile.css' />
</head>
CSS
.nav-button-h {
position: relative;
display: flex;
justify-content: space-between;
height: 20vh;
width: 100vw;
top: 40%;
/* left: 0.5rem; */
z-index: 100;
font-family: Helvetica, sans-serif;
font-size: 1.5rem;
}
#logo-center {
display: none;
}
.mobile-logo {
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
font-family: Helvetica, sans-serif;
font-weight: bold;
width: 1.5rem;
}
#projbtn {
align-self: center;
}
.nav-button-v {
font-size: 1.5rem;
}
.openPress {
-webkit-transform: translate3d(100vw, 0, 0);
transform: translate3d(100vw, 0, 0);
transition: transform 1s;
}
.openAbout {
-webkit-transform: translate3d(-100vw, 0, 0);
transform: translate3d(-100vw, 0, 0);
transition: transform 1s;
}
/* press page */
.press-container {
width: 100vw;
}
.img-grid {
margin-top: 6vh;
margin-left: -30vw;
padding: 1rem;
}
.press-info {
width: 70vw;
height: 47vh;
}
.fixed-wrapper {
left: 173vw;
height: 20vh;
}
.contact-wrapper {
height: 20vh;
}
.back_home {
display: block;
position: fixed;
z-index: 2;
font-family: Helvetica, sans-serif;
font-size: 1.5rem;
color: black;
background-color: white;
text-transform: uppercase;
font-weight: bold;
}
.press__mobile {
margin-left: 75vw;
margin-top: 90vh;
}
.fixed-wrapper {
top: 5vh;
}
.contactbtn {
float: left;
font-size: 1.4rem;
}
.contact-wrapper ul {
background-color: rgba(255, 255, 255, 0.829);
color: black;
margin-top: 3vh;
width: 60vw;
height: 18vh;
margin-left: -45vw;
text-align: center;
justify-content: flex-start;
padding: 1rem;
pointer-events: none;
}
.contact-wrapper a {
color: white;
}
/* about page */
.about-container {
width: 100vw;
left: -100vw;
}
this line of code is invalid:
<link rel='stylesheet' media='only screen and (min-device-width:320px) and (max-device-width: 850px) and (-webkit-device-pixel-ratio: 3) and (-webkit-device-pixel-ratio: 2)' href='css/mobile.css' />
you should add your media queries inside a css file ( probably inside your mobile.css
)
@media only screen and (min-width: 320px) {
.class{
background-color: green;
}
}