Currently, I am in the process of developing a webpage that needs to be responsive across various screen sizes. To achieve this, I have incorporated CSS media queries within my stylesheets.
While everything functions properly when tested on Firefox and Chrome, Microsoft Edge seems to only acknowledge the first media query. Strangely, upon removing the initial media query, the second one starts working as intended.
Has anyone else encountered this issue before? Is it a common problem?
The line used for the media queries reads: @media all and (max-height: 600px)
This is an excerpt from the relevant code:
<a href="#top" id="go-to-top"><i class="fa fa-arrow-up"></i></a>
<nav>
<button id="cross" class="cross menuButtonNotVisible"><i class="fa fa-times"></i></button>
<button id="parameters" class="parameters menuButtonVisible"><i class="fa fa-bars"></i></button>
<a href="#one">Home</a>
<a href="#two">About Us</a>
<a href="#three">Services</a>
<a href="#four">Location</a>
<a href="#six">Contact Us</a>
</nav>
<header>
<h1>Beautiful Design. User-Friendly. Fully-Loaded.</h1>
<h2>This website showcases what your own website could look like. Any questions?</h2>
<h3><a href="#six">Request Your Free Quote Now</a></h3>
<div id="angle-down"><a href="#one" id="angle-down"><i class="fa fa-angle-down"></i></a></div>
</header>
<div id="iconBar">
<ul>
<li><a href="#one"><i class="fa fa-cube"></i><p>Customized</p></a></li>
<li><a href="#two"><i class="fa fa-shield"></i><p>Security</p></a></li>
<li><a href="#three"><i class="fa fa-search"></i><p>SEO</p></a></li>
<li><a href="#four"><i class="fa fa-mobile"></i><p>Responsive</p></a></li>
<li><a href="#six"><i class="fa fa-code"></i><p>Interactive</p></a></li>
</ul>
</div>
<div class="wrapper">
@media all and (max-height: 600px){
header h1{margin-top:3em;}
header h2, header h3{display:none;}
header {height:300px;}
#iconBar ul{top:300px; height:150px;}
.wrapper{top:450px;}
}
@media all and (max-width: 700px){
.noResponsiveDisplay{
display:none;
}
nav, .sticky{
background-color:#323a45;
margin:0;
padding:0 1em 3em 1em;
color:white;
display:block;
height:1.3em;
overflow:hidden;
position:fixed;
border:0px solid black;
}
nav a, .sticky a{
clear:both;
display:block;
padding:0 0 0.4em 0;
font-size:1.5em;
color:white;
}
#iconBar{
display:none;
}
header{
height:78%;
}
header h1{
margin-top:6em;
font-size:1.5em;
}
header h2{
font-size:0.8em;
}
.wrapper{
top:78%;
}
.menuButtonVisible{
display:block;
}
.mobileMenu{
overflow:visible;
display:show;
height:auto;
}
}
Interestingly, there's a third media query included as well. However, this particular one only takes effect once the preceding two media queries are removed.