CODEWITHSUNDEEP
htmlcssmedia-queries
Laiqa Mohid
Laiqa Mohid

Reputation: 561

CSS media queries won't work in browser resizes for iphone 6,7,8

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;

}

Upvotes: 0

Views: 289

Answers (3)

Geuis
Geuis

Reputation: 42267

The way you're doing your css is completely incorrect.

First, you have absolutely no media queries. Your media queries should simply be setup for min-width, nothing else. No max-width, nothing. Those need to be within your css file, not in the link element.

Responsive design should only and I mean ONLY be done with mobile-first dimensions using min-width media queries. As the width dimension increases beyond a certain point, then you add the next media query for the next largest width.

This is such a simple concept that I have been seen hundreds of people not understanding over the last 6-7 years. One company I worked for briefly a while back, after I came in I had to completely re-write their entire css stack to support these basic rules and ultimately fix most of the problems they were having.

I recommend looking at how Bootstrap started doing their media queries about 4-5 years ago. I'm not up to speed on what the framework is doing in the current version but they were moving in the right direction back then.

Generally, and this is purely from memory, the preferable min-width sizes are: 320px, 480px, 768px, 1024px, and 1200px. This should account for portrait and landscape modes for all mobile and tablet devices, moving up into desktop widths. Adjust as needed.

Upvotes: 0

BillJustin
BillJustin

Reputation: 274

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;
  }
}

Upvotes: 1

Jake B.
Jake B.

Reputation: 444

In order to achieve this you will need to add the media query into the mobile.css file not on the HTML link declaration.

You need to wrap the contents of the mobile.css file with the media query; like below:

@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) {
 //contents of your mobile.css file goes here
}

Upvotes: 1

Related Questions