Issues arising in Microsoft Edge due to multiple media queries being utilized

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.

Answer №1

Experiencing similar issues with the functionality of classygroundcovers.com on Edge browser. It seems that only the initial element is recognized, resulting in broken features. While Chrome, Firefox, and Internet Explorer display a chat widget for widths exceeding 590px, Edge shows a text link in the bottom navigation bar regardless of screen size.

Answer №2

In order to customize the styling based on different screen sizes, you can utilize media queries in your CSS code. For instance, if you want certain styles to be applied when the width is less than 700px and then have those overridden by new values when the height drops below 600px, you would arrange your media queries accordingly. First, specify "@media all and (max-width: 700px)" followed by the styles. Then, add another media query for "@media all and (max-height: 600px)" with the updated styles to take precedence. This hierarchical structuring should achieve the desired result effectively.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The left margin class in Bootstrap seems to be having trouble functioning properly within a React

Navbar <div className="collapse navbar-collapse" id="navbarSupportedContent"> <ul className="navbar-nav ml-auto"> <li className=&quo ...

Unable to implement a design on a button during its click event

I successfully implemented a dynamic button in HTML5 and Javascript. The button has a click event assigned to it, so when clicked, its content and background color are supposed to change. However, while the content changes correctly, the background color d ...

Minimize the number of clicks needed to navigate using the HTML/JavaScript navigation

On my website, I have a navigation bar that changes the contents of a div when a user clicks on an item. However, if the user clicks multiple times in quick succession, the content changes too many times. I want to ensure that the content only changes once ...

Eliminating the need for horizontal scrolling in the window causes a change in the height of an internal DIV element

Check out this snippet of code, a simplified version of a larger piece: html, body { margin: 0 !important; padding: 0 !important; /* overflow-x: hidden; /* uncomment this line */ } .app { position: relative; width: 100%; text-align: center !important; } ...

What is the best way to ensure my jQuery slides are responsive?

I have been developing a personal practice website and have successfully integrated a jQuery slide show for showcasing photographs. However, I am facing a challenge in making these slides responsive when the screen size changes. I have gone through numerou ...

Different ways to modify the underline and label color in Material-UI's <Select/> component

A while ago, I came across this useful demo that helped me change the colors of input fields. Here is the link: https://stackblitz.com/edit/material-ui-custom-outline-color Now, I'm on a quest to find a similar demo for customizing the color of selec ...

"JQuery event handlers not functioning as expected: .click and .on failing

For some time now, I've been facing this issue and I'm at a loss trying to figure it out. I have attempted various solutions such as using .click(), .on(), .delegate, and even utilizing .find() to locate the specific element causing the problem. ...

Ways to eliminate a css class with jquery based on a specific screen dimension

There is a div element that includes a specific class. My goal is to remove this class when the window is resized to fit a mobile view-port. <div class="box"></div> ...

Utilizing ease-in effect on show more button clicks in CSS

When I click "show more," I want to have a smooth ease-in/out animation for 3 seconds. However, I am facing difficulties achieving this because I am using overflow: hidden and -webkit-line-clamp: 2; Are there any other methods to accomplish this? https: ...

Aligning a button with a <div> block is not achieved through styling

Take a look at the jsfiddle example. Expected result: Actual result: Here is the HTML snippet responsible for that section of the page: <input type="submit" name="BT_resetZoom" value="Reset coordinates" id="BT_resetZoom" tabindex="10" style="height: ...

What benefits come from dynamically loading and unloading JavaScript and CSS stylesheets?

Introduction: Currently, I am in the process of developing a website that will utilize ajax to change content without refreshing the main frame and images every time. The main frame has its own site.css stylesheet. Query 1: Considering the use of a sing ...

Hover not registering on Iframe element in all versions of Internet Explorer

Currently facing an issue with iframe:hover. The iframe on my website is hidden, and when I hover over a link or the iframe itself, it should become visible. This functionality works perfectly in most browsers, except for Internet Explorer (all versions). ...

What's the best way to make sure an image in CSS respects the height of its parent flexbox section?

This question addresses a clear problem: Flexbox - Img height conflict. However, the accepted answer does not meet my specific needs. One potential solution involves using absolute and relative positioning. While this resolves sizing issues, it interferes ...

What methods can I use to achieve a stylish and responsive design for my images?

I have been encountering difficulties styling the images for my website. Despite multiple attempts, I am unable to apply CSS properties such as border-radius and responsive design to the images on my page. The images load fine, but they do not seem to acce ...

Troubleshoot: Why is my Bootstrap 3 responsive navigation bar not functioning

When using drop down items that are longer in length, they tend to wrap down to the next level rather than overflowing. I am not well-versed in @media queries, but I've noticed that on mobile devices the dropdown collapses in the navigation menu, whil ...

Ways to expand the border horizontally using CSS animation from the middle

Currently, I am experimenting with CSS animation and I have a query regarding creating a vertical line that automatically grows in length when the page is loaded. I am interested in making the vertical line expand from the center in both upward and downwar ...

Ensure that when you click on the next dropdown menu opener button, the previous dropdown menu closes and only the new menu remains open

Take a look at this page first to get an understanding: On this page, I have implemented multiple dropdown menus that should open when clicked on their respective opener buttons (3 bar icon) and close either when clicked again or anywhere else on the page ...

The default values for CSS filters

I have a keen interest in various CSS filters: blur brightness contrast grayscale hue-rotate invert opacity saturate sepia Could someone provide the default values for each filter (preferably as a % value, where applicable)? The MDN documentation does no ...

Adjust the positioning of the content within each card inside the modal box

I require assistance in adjusting the CSS for different cards within the modal box. I would like all cards to have consistent column width for various content within them, creating a symmetrical appearance. Currently, the cards appear staggered. Also, plea ...

CSS: Indication that the Text is Extending Beyond its Container

Seeking a solution to indicate overflow of text within its container, as demonstrated in this example. Essentially, a <span> with fixed dimensions. Looking for a visual cue when text exceeds boundaries. Attempted the use of text-overflow:ellipsis;, ...