The browser Internet Explorer fails to recognize the @media screen rule

Currently, I'm focusing on creating a responsive design for a web page. The issue I am encountering involves loading data via ajax to render forms. Strangely, only Internet Explorer seems to think that the width is less than 768px after rendering (thus triggering my responsive template). This problem specifically arises on IE9 and above. I'm puzzled as to why IE seems to be ignoring the @media query. Is there possibly another underlying issue causing this malfunction?

@media only screen and (max-width:767px){   
#topmenu-responsive{
width: 80%;
}
}

I have attempted the following solutions:

<meta http-equiv="X-UA-Compatible" content="IE=edge,9,10,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Unfortunately, these attempts have yielded no improvements so far.

javascriptcssajaxinternet-explorerjoomla3.0

Answer №1

Your code seems to be working perfectly. Make sure to test it on various different browsers as well! I have also checked it myself.

View Live Demo Here

Snippet Example 

@media only screen and (max-width:767px){   
#topmenu-responsive{
width: 80%;
background:red;
border:1px solid black;
}
}
<meta http-equiv="X-UA-Compatible" content="IE=edge,9,10,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
<div id="topmenu-responsive">
topmenu-responsive Div
</div>

Internet Explorer 11

https://i.sstatic.net/4Ku1u.png

Firefox

https://i.sstatic.net/Iykmv.png

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

"Implementing a search bar feature using HTML, CSS, and

My attempt to implement a search bar CSS from CodePen is not working properly in React. Even though I used the exact code provided, the search bar seems to be buggy. If you want to take a look at the code sandbox for better reference, you can visit: https ...

htmlcssreactjs

I wonder where the file from the HTML form download has originated

Recently, I've been experimenting with the developer tools in Chrome to observe the behavior of websites at different moments. It has proven useful in automating certain tasks that I regularly perform. Currently, my focus is on automating the process ...

javascriptpythonhtmlajaxgoogle-chrome

The click event in AngularJS is functioning properly, while the load event is not functioning correctly

As a newcomer to angularjs, I am attempting to run a function once a div has finished loading. app.js var app = angular.module('myApp',[]); app.directive('orientable', function () { return { link: function(scope, e ...

javascriptjqueryhtmlangularjs

PUPPETER - Unpredictable pause in loop not functioning as expected

Having an issue with this specific part of the code: (async () => { const browser = await puppeteer.launch({ headless: false, // slowMo: 250 // slow down by 250ms }); const page = await browser.newPage(); //some code // CODE ABOVE WORKS, ...

javascriptloopstimeoutpuppeteer

What is the best way to tally json elements for every parameter?

My data consists of JSON objects with "Week" and "From" properties: { "Week": 1145, "From": "IN1" }, { "Week": 1145, "From": "IN1" }, { "Week": 1145, "From": "IN2" }, { "Week": 1146, "From": "IN1" }, { "W ...

javascriptjsonextjs

Organize your information starting from the left and moving to the right

Currently, I am engaged in a project where I need to retrieve commands and showcase them on a screen. However, there seems to be an issue as the commands are appearing one by one and automatically moving down to the footer. What I actually want is for th ...

phphtmlcss

Tips for Storing Your Data Collection: A Guide on Different Storage Options

In the different parts of my app, I require access to a dataset containing timezones. Traditionally, I have stored such data in a class method like Timezone.all_zones (Ruby) for easy accessibility anywhere in my code. Is there a way to achieve this same ...

javascriptreactjs

Conceal the Angular Bootstrap modal instead of shutting it down

I am utilizing Angular Bootstrap Modal to launch multiple modals, including a video player. http://angular-ui.github.io/bootstrap/#/modal My goal is to maintain the video's current position even when the modal is closed. This way, when I reopen the ...

javascriptcssangularjstwitter-bootstrap

The feature in Chrome that automatically reloads generated CSS is failing to refresh the page after SASS recompiles the CSS

I'm attempting to set up Chrome's DevTools to automatically reload a page when I save changes to a watched SCSS file that compiles and updates the CSS file. Although I have checked the Auto-reload generated CSS option, it is unfortunately not fu ...

htmlcssgoogle-chromesass

error: local server did not return any data

I am currently using PHP on a Linux machine. In my HTML code, I have set up an AJAX request to the local Apache server (check http://localhost), with the intention of displaying the data from the server on the screen. However, for some reason, nothing is b ...

javascripthtmlajax

Eliminate viewed alerts by implementing a scrolling feature with the help of Jquery, Javascript, and PHP

My goal is to clear or remove notifications based on user scrolling. The idea is to clear the notification once the user has seen it, specifically in a pop-up window for notifications. I am relatively new to Javascript/jQuery and feeling a bit confused abo ...

javascriptphpjquerycsswordpress

Innovative and responsive web design strategies

Although I have a solid understanding of html, css, and JavaScript, I struggle with combining these skills effectively. My expertise lies in developing native apps for Android, where I focus on creating dynamic layouts using relative positions and sizes li ...

javascriptandroidhtmlcssresponsive-design

Animate the coloring process with dynamic motion

Is there a way to dynamically fill a canvas with color and apply animation? I have successfully created a canvas cylinder that fills with color, but I'm hoping for a slow animation effect when the color is filled. I've tried searching on Google ...

jquerycsshtmlcanvashtml5-canvas

The performance of ASP.net text-boxes is inconsistent

After days of searching for a solution, I am still unable to resolve my issue. My website features a simple web-form with text-boxes that are supposed to appear when the user selects the "custom search" option. While testing locally, everything works fine. ...

asp.netcsstexttextboxmarkup

Is it possible to include line breaks within a CSS value?

(I am posting this here because I couldn't find a solution and eventually figured it out through trial and error. Hopefully, this information can help others with the same question.) Note: This is not the same as the discussion on Single-line vs mult ...

csssyntax

Is there an issue with Vue-router 2 where it changes the route but fails to update the view

I am currently facing an issue with the login functionality on a website that utilizes: Vue.js v2.0.3 vue-router v2.0.1 vuex v0.8.2 In routes.js, there is a basic interceptor setup router.beforeEach((to, from, next) => { if (to.matched.some(record ...

javascriptvue.jsvuejs2vue-router

Error encountered while running a Javascript application in Selenium IDE

Occasionally, I encounter this issue while executing test cases in Selenium IDE: An unexpected error occurred. Message: TypeError: testCase.debugContext.currentCommand(...) is undefined Url: chrome://selenium-ide/content/selenium-runner.js, line ...

javascriptgoogle-chromeseleniumselenium-ide

Is it possible to use Vuelidate for password validation in Vue.js?

I found a helpful reference on How to validate password with Vuelidate? validations: { user: { password: { required, containsUppercase: function(value) { return /[A-Z]/.test(value) }, containsLowercase: fu ...

javascriptvue.js

Can you iterate through each element that matches those in a different array?

As a beginner in Javascript, I may stumble upon some obvious errors, so please bear with me. My goal is to iterate through two arrays and perform a loop for each element that exists in both arrays. Currently, this is my code: if(obtainedCards.some( sp =& ...

javascriptarraysforeach

The issue of transferring an argument from an ajax post to perl is not functioning as expected

I'm facing an issue where I can't seem to pass an argument from AJAX post to Perl successfully. Here's the HTML code snippet: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">&l ...

jqueryajaxperlcgi