Issue
My web app is responsive on the computer and with the web developer tool. Works great using the developer tool and checking each phone.
It is not working on my actual phone though. Please help.
Here's the github page to publish that I am using so you can try on your phone: https://xtina-lt.github.io/flexbox/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Position Practice</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="top-nav">Logo Links Signout</div>
<div class="side-nav"></div>
<div class="main">
<div class="sub-content"></div>
<div class="sub-content"></div>
<div class="sub-content"></div>
<div id="advertisement"></div>
</div>
</div>
</body>
</html>
CSS:
body{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(to bottom right, rgba(0, 255, 255, 0.5), rgba(142, 164, 212, 0.5), rgba(138, 43, 226, 0.5));
background-position: center;
background-size: auto;
background-repeat: no-repeat;
}
.container{
background-color: rgba(255, 255, 255, 0.2);
width: 95vw;
height: 95vh;
display: flex;
flex-wrap: wrap;
padding: 1vh 1vw;
row-gap: 0.5vh;
column-gap: 0.5vw;
justify-content: space-evenly;
}
.top-nav {
background-color: rgba(144, 238, 144, 0.5);
height: 12%;
width: 100%;
}
.side-nav {
background-color: rgba(0, 0, 255, 0.5);
height: 85%;
width: 20%;
}
.main {
box-sizing: border-box;
background-color: rgba(255, 192, 203, 0.5);
height: 85%;
width: 75%;
display: flex;
flex-wrap: wrap;
padding: 1vh 1vw;
row-gap: 0.5vh;
column-gap: 0.5vw;
justify-content: space-evenly;
}
.sub-content {
background-color: rgba(255, 255, 0, 0.5);
width: 30%;
height: 80%
}
#advertisement {
background-color: rgba(129, 1, 129, 0.5);
width: 100%;
height: 15%;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.side-nav{
width: 35%;
}
.main{
overflow: scroll;
scrollbar-width: none;
width: 60%;
}
.sub-content {
background-color: rgba(255, 255, 0, 0.5);
width: 100%;
}
}
I have also tried:
@media only screen and (max-width: 480px)
Should look like: screenshot in developer tool view lol
Solution
I hosted it locally it works fine, seems like a problem with your host
try netlify, it's a great free host service
Answered By - Anuja Nimesh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.