'I have 3 @media screen tags but only 2 are working
I have
<meta name="veiwport" content="width=device-width, initial-scale=1.0">
in my HTML and I have these 3 in my CSS
@media all and (min-width: 1025px){
.svg_x2{
width: 20%;
height: 7%;
z-index: -100;
}
.data_science{
padding: 3%;
transition: 0.5s;
}
.Development{
padding: 3%;
transition: 0.5s;
}
.SocialMedia{
padding: 3%;
transition: 0.5s;
}
.CreativeConsultant{
padding: 3%;
transition: 0.5s;
}
}
@media all and (min-width: 801px) and (max-width: 1024px){
.nav_name{
visibility: hidden;
opacity: 0;
}
nav{
padding-right: 10px;
height: 100%;
width: 100%;
margin-right: 15%;
}
.navifation_container{
align-items: center;
}
.navifation_container a{
float: right;
text-align: center;
font-size: 35px;
}
.Data_container{
margin-top: 25%;
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 1fr;
}
.data_header{
grid-row: 1;
grid-column: 1;
}
.data_text{
grid-row: 2;
grid-column: 1;
}
.data_text p{
padding: 2%;
grid-row: 2;
grid-column: 1;
}
.data_graph{
grid-row: 3;
grid-column: 1;
}
.about_container{
padding: 5%;
margin-top: 40%;
}
.about_container{
margin-top: 2%;
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.svg_x2{
height: 5%;
width: 15%;
}
.data_graph{
margin-left: 15%;
height: auto;
}
.data_science{
grid-column: 1;
grid-row: 1;
color: white;
width: 80%;
height: auto;
background-color: #1C222F;
justify-self: center;
align-self: center;
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.25);
font-size: 55px;
padding: 5%;
}
.Development{
grid-column: 1;
grid-row: 2;
color: white;
width: 80%;
height: auto;
background-color: #1C222F;
justify-self: center;
align-self: center;
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.25);
font-size: 55px;
padding: 5%;
}
.CreativeConsultant{
grid-column: 1;
grid-row: 3;
color: white;
width: 80%;
height: auto;
background-color: #1C222F;
justify-self: center;
align-self: center;
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.25);
font-size: 55px;
padding: 5%;
}
.SocialMedia{
grid-column: 1;
grid-row: 4;
color: white;
width: auto;
height: 95%;
background-color: #1C222F;
justify-self: center;
align-self: center;
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.25);
padding: 5%;
}
.circles_svg{
top: 25vh;
right: 70vw;
width: 40%;
height: 15%;
}
.svg_x2{
width: 20%;
height: 3%;
}
.about_container p{
font-size: 35px;
}
.about_container h1{
font-size: 65px;
}
}
@media all and (min-width: 300px) and (max-width: 800px){
.nav_name{
visibility: hidden;
opacity: 0;
}
nav{
padding-right: 10px;
height: 100%;
width: 100%;
margin-right: 0;
margin-left: 4%;
}
.navifation_container{
align-items: center;
}
.navifation_container a{
float: none;
text-align: center;
font-size: 35px;
}
.sitewrapper .header{
visibility: visible;
opacity: 1;
}
.circles_svg{
top: 15vh;
right: 70vw;
width: 40%;
height: 15%;
}
.x_svg{
left: 83vw;
}
.Data_container{
margin-top: 100%;
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 1fr;
}
.data_header{
grid-row: 1;
grid-column: 1;
}
.data_text{
grid-row: 2;
grid-column: 1;
}
.data_text p{
padding: 2%;
grid-row: 2;
grid-column: 1;
}
.data_graph{
visibility: hidden;
opacity: 0;
position: absolute;
top: 1px;
right: -1000px;
}
.about_container{
margin-top: 0%;
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.Circle_svg{
grid-row: 2/4;
grid-column: 1;
z-index: -1;
align-self: center;
justify-self: center;
}
.data_science{
grid-column: 1;
grid-row: 1;
color: white;
width: 80%;
height: 95%;
background-color: #1C222F;
justify-self: center;
align-self: center;
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.25);
}
.Development{
grid-column: 1;
grid-row: 2;
color: white;
width: 80%;
height: 95%;
background-color: #1C222F;
justify-self: center;
align-self: center;
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.25);
}
.CreativeConsultant{
grid-column: 1;
grid-row: 3;
color: white;
width: 80%;
height: 95%;
background-color: #1C222F;
justify-self: center;
align-self: center;
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.25);
}
.SocialMedia{
grid-column: 1;
grid-row: 4;
color: white;
width: 80%;
height: 95%;
background-color: #1C222F;
justify-self: center;
align-self: center;
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.25);
}
.svg_x2{
width: 20%;
height: 3%;
}
}
The problem is that the 300 to 800 range isn't registering it only reads 800 to 1024 and the normal view. I have tried switching up the order of them as well and it still does not seem to work.
I have loaded it on my phone, on chrome and cleared all cookies to test as well.
I have also tried @media only screen and
and here is the html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css')}}">
<meta name="veiwport" content="width=device-width, initial-scale=1.0">
<title>Savage Digital</title>
</head>
<body >
<div class="sitewrapper">
<div class="navifation_container">
<nav>
<h2 class="nav_name">Robert Savage</h2>
<a href="/Projects">Projects</a>
<a href="/">Home</a>
</nav>
</div>
<header class="header">
<a href="" class="logo">Robert Savage</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="/Projects">Portfolio</a></li>
</ul>
</header>
<div class="what_am_i">
<h1>I am a <span class="typed"></span></h1>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
var typed = new Typed('.typed', {
strings: ['Designer','Developer','Creator', 'Inovator'],
typeSpeed:60,
backSpeed:60,
startDelay: 10,
loop: true
});
</script>
<div class="x_svg">
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="109.000000pt" height="109.000000pt" viewBox="0 0 109.000000 109.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,109.000000) scale(0.100000,-0.100000)"
fill="#6246D4" stroke="none">
<path d="M112 977 c-61 -62 -112 -117 -112 -122 0 -6 68 -78 150 -160 l150
-150 -150 -150 c-82 -83 -150 -155 -150 -160 0 -13 222 -235 235 -235 5 0 77
68 160 150 l150 150 150 -150 c82 -82 154 -150 160 -150 13 0 235 222 235 235
0 6 -68 78 -150 160 l-150 150 150 150 c82 83 150 155 150 160 0 13 -222 235
-235 235 -6 0 -78 -68 -160 -150 l-150 -150 -150 150 c-83 82 -155 150 -160
150 -6 0 -61 -51 -123 -113z"/>
</g>
</svg>
</div>
<div class="circles_svg">
<div class="circle1">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#ffffff"/>
</svg>
</div>
<div class="circle2">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#ffffff"/>
</svg>
</div>
<div class="circle3">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#ffffff"/>
</svg>
</div>
<div class="circle4">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#ffffff"/>
</svg>
</div>
<div class="circle5">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#ffffff"/>
</svg>
</div>
<div class="circle6">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#ffffff"/>
</svg>
</div>
<div class="circle7">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#ffffff"/>
</svg>
</div>
<div class="circle8">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#ffffff"/>
</svg>
</div>
<div class="circle9">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#ffffff"/>
</svg>
</div>
<div class="circle10">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#ffffff"/>
</svg>
</div>
<div class="circle11">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#ffffff"/>
</svg>
</div>
<div class="circle12">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="10" cy="10" r="10" fill="#ffffff"/>
</svg>
</div>
</div>
</div>
<div class="Svg_wrapper">
<div class="svg1">
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1440.000000pt" height="182.000000pt" viewBox="0 0 1440.000000 182.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,182.000000) scale(0.100000,-0.100000)"
fill="#6246D4" stroke="none">
<path d="M1580 1813 c-332 -14 -612 -29 -1050 -59 -283 -18 -518 -34 -522 -34
-5 0 -8 -387 -8 -860 l0 -860 7200 0 7200 0 -2 737 -3 738 -470 32 c-916 61
-1437 83 -2020 83 -811 0 -1245 -30 -2445 -170 -1059 -123 -1416 -150 -1979
-150 -629 0 -1067 45 -2051 211 -261 44 -605 102 -765 129 -694 117 -1185 173
-1760 200 -182 9 -1141 11 -1325 3z"/>
</g>
</svg>
</div>
<div class="bottom_svg">
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1440.000000pt" height="222.000000pt" viewBox="0 0 1440.000000 222.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,222.000000) scale(0.100000,-0.100000)"
fill="#6246D4" stroke="none">
<path d="M0 1110 c0 -611 2 -1110 5 -1110 3 0 224 107 492 239 269 131 565
273 658 314 657 291 1198 453 1760 528 227 31 696 34 900 6 404 -56 729 -140
1540 -402 729 -235 1066 -320 1470 -371 194 -25 559 -25 750 0 443 56 721 130
1650 441 801 268 1042 337 1382 395 790 135 1643 37 2683 -310 199 -66 923
-328 1093 -395 16 -7 17 39 17 884 l0 891 -7200 0 -7200 0 0 -1110z"/>
</g>
</svg>
</div>
</div>
<div class="Data_container">
<h1 class="data_header">Analize Visualize and Gather <span class="DATA">DATA</span></h1>
<div class="data_text">
<div class="data_wrapper"><span class="DATA">DATA</span></div>
<h1>Gather</h1>
<P>Gathering good data is the most crucial point for any business, I can work with you in setting up good methods for gathering data for your business.</P>
<h1>Visualize</h1>
<P>Once Ihave gathered the data I can start visualizing it, using graphs and plots to better help understand what you may need to do.</P>
<h1>Analize</h1>
<P>Finally I wrap it all up and see what the data I gathered and visualized means, and then deliver it to you in a comprehensive way.</P>
</div>
<div class="data_graph">
<iframe src="https://robert-savage-portfolio.herokuapp.com/testeroo" style="border:none;" scrolling="no"></iframe>
</div>
<div class="svg_sqig1">
<img src="{{url_for('static', filename='v3.png')}}">
</div>
<div class="svg_x1">
<img src="{{url_for('static', filename='v4.png')}}">
</div>
<div class="svg_x2">
<img src="{{url_for('static', filename='v4.png')}}">
</div>
<div class="svg_x3">
<img src="{{url_for('static', filename='v5.png')}}">
</div>
<div class="svg_x4">
<img src="{{url_for('static', filename='v6.png')}}">
</div>
<div class="svg_x5">
<img src="{{url_for('static', filename='v7.png')}}">
</div>
<div class="svg_6">
<img src="{{url_for('static', filename='v9.png')}}">
</div>
</div>
<div class="about_container">
<div class="data_science">
<h1>Data Science</h1>
<p>Help your business grow with the power of data science. Using python to help evaluate existing data or gathering new data to evaluate and find out how to optimize your business.</p>
</div>
<div class="Development">
<h1>Development</h1>
<p>Design your business a responsive and modern website or develop programs to help automate your business by eliminating time wasting tasks.</p>
</div>
<div class="CreativeConsultant">
<h1>Operations</h1>
<p>Opatamize and create systems for buisnesses to increase productivity and help manage tedious day to day activities.</p>
</div>
<div class="SocialMedia">
<h1>Socil Media</h1>
<p>Grow your following and engagement on social media, I will help develop a plan and manage/ setup ad plans to best meet your needs.</p>
</div>
<div class="Circle_svg">
<img src="{{url_for('static', filename='v8.png')}}">
</div>
</div>
<div class="Conact_container">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="{{url_for('static', filename='scipt.js')}}"></script>
</body>
</html>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|