Media queries in CSS appear to be dysfunctional when used on Microsoft Edge

 @media (min-width: 992px) and (max-width: 1140px) 
{
  .mr-1024-none
  {
        margin-right: 0px !important;
  }

  .mt-1024
  {
        margin-top: 1rem !important;
  }  

   .d-1024-none 
   {
        display: none !important;   
   }

}

Utilizing the code snippet above, I attempted to address an issue on Internet Explorer and Edge. While the media query functions correctly on IE, it appears to have some limitations on Edge. After conducting thorough research, I discovered that Edge does not fully support this particular media query. I would greatly appreciate any assistance in resolving this matter!

javascriptcss

Answer №1

Make sure to check the order in which you're calling your custom stylesheet when using Bootstrap. If it's called before Bootstrap, the Bootstrap rules will override your custom styles.

Answer №2

Dealing with a similar issue, I found a solution. If the style remains consistent below your min-width and between min-width and max-width, consider removing the min-width declaration. Also, it's important to confirm that you are linking your custom stylesheet after Bootstrap in order for everything to work properly.

@media screen and (max-width: 1140px) {...}

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

What is the best way to place text alongside a shape?

I'm attempting to place text beside the circular shape. HTML <div class="row"> <div class="col-sm-2"> <span><div class="circle"></div></span><p>available</p> </div> </div> C ...

htmlcsstwitter-bootstrap-3

At what point does the browser begin fetching the background images specified in a stylesheet?

Are images mentioned in a valid CSS declaration with a background-image value downloaded when the stylesheet is parsed or when the declaration is applied on a page? In simpler terms, do I need to download all background images listed in my stylesheet even ...

cssperformance

Tips for effectively placing a page scope block using BEM

Here is the current structure of my header. The page component is assumed to be the root. Currently, the geometry of the social-links block is being controlled by the header__social-links mix (positioned absolutely relative to the header). How can I prop ...

htmlcssbem

Error message received from GitHub when attempting to create a repository through the REST API states that JSON cannot

I am currently in the process of learning how to use REST APIs for GitHub, and my current project involves creating a new repository using JavaScript. Below is the function I have written for this purpose, which includes generating a token and granting all ...

javascriptnode.jsrequestgithub-api

Is it possible to use two onChange functions in a single text field with ReactJS?

Is it possible to have two onChange functions in a single Textfield? In my code, "onChange={ showDiv}" is a handler that shows "Direct 2" when clicked and hides upon selecting option1. The second onChange={(e) => exhandleChange(e)} is used for another ta ...

javascriptreactjsreact-nativematerial-ui

Is it possible to implement PortalVue in multiple Vue.js single file components?

While working on Vue.js (single file components), I have discovered three methods of passing data around: local state/props, store, and utilizing PortalVue. Through my experiments with PortalVue, I successfully implemented both portal and portal-target wit ...

javascriptvue.jsvue-component

Creating a dynamic pulse effect using jQuery to manipulate CSS box-shadow

My goal is to create a pulsating effect using CSS box-shadow through jQuery. Despite my best efforts, the code I attempted failed to produce the desired smooth pulse effect with box-shadow. The code snippet I experimented with: <div class="one"> &l ...

javascriptjqueryhtmlcss

When the click event is triggered, the second function guess() does not execute

I am currently developing a number guessing application. It consists of two functions, the first one called startGame() works correctly (it receives the maximum number and then disappears by adding the hidden class). However, the second function that is ...

javascripthtmlfunctionevent-handlingmouseclick-event

What is the best way to ensure PyScript is completely initialized, including the environment?

Hey there! I'm hoping to catch a specific message being logged in my browser's console by a script I added to my HTML file, and then trigger a JavaScript action based on that. For instance, when "ABCD:READY" appears in the console, I want to cal ...

javascripthtmlbrowserpyscript

The inline style in Angular 2 is not functioning as expected when set dynamically

Having a small dilemma... I'm trying to apply an inline style within a div like this: div style="background: url(..{{config.general.image}})"></div Oddly enough, it was functioning in beta 16 but ever since the RC1 upgrade, it's no longer ...

javascripttypescriptangular

Creating a variety of themes with unique color palettes for Angular Material along with custom-designed components

One of the goals for my app is to have multiple themes, including Angular Material themes, with the ability to define custom colors for specific components and elements that are not part of Angular Material. It's important that when I change a theme, ...

cssangularsassangular-material

Is it not possible to access a private member from an object that was not declared in its class...?

Within this program: class Example { #privateMember = 123; // these are fine addNumber (n) { return this.#privateMember + n; } doAddNumber (n) { return this.addNumber(n); } // "cannot read private member #privateMember from an ...

javascriptnode.jstypeerrorprivate-membersclass-fields

How to set default props in Vue Select component?

I have been utilizing the vue-multiselect plugin from this website: Given that I plan to use it frequently, I am interested in establishing some default props. For instance, my aim is to have the selectLabel prop set as an empty string and possibly con ...

javascriptvue.jsdefaultsvue-select

How come the values in my object remain inaccessible even after assigning values to it with navigator.geolocation.getCurrentPosition() and returning it?

After successfully assigning values to my pos object within the whereAmI function using navigator.geolocation.getCurrentPosition(), I can confirm that lat and lng are present inside the object. However, attempting to access these properties later on resu ...

javascriptreactjsnavigatorreact-google-maps

The React hamburger menu triggers a re-render of child elements within the layout

I am currently working with React and Material UI v5. Within my layout, I have a menu component with children. Whenever I click on the menu, it triggers a refresh of the children components. I attempted to resolve this by encapsulating the child components ...

javascriptreactjsmaterial-uihamburger-menu

I am facing difficulties in installing the necessary node modules for my Angular project

After attempting to run npm install, an error message is displayed towards the end: error syscall unlink 22396 error The operation was rejected by your operating system. 22396 error It's possible that the file was already in use (by a text editor or ...

javascriptangularnpmnode-modulesnpm-install

Emptying the trumbowyg editor within an Angular environment

I am currently experiencing issues with the trumbowyg editor in a project I'm working on. I am able to update the editor by changing its model but cannot seem to clear its content using $scope.editorModel = '';. For a more detailed explanati ...

javascriptangularjswysiwygtrumbowyg

Trouble arises with the MUI 5 date picker when inputFormat is included

When I select a date from the calendar, everything works fine. However, if I set inputFormat="yyyy/MM/dd" and manually type in the date, it doesn't recognize the date format properly. Instead, it treats the input as a string like 11111111111 ...

javascriptreactjsmaterial-ui

Leverage the specific child's package modules during the execution of the bundle

Project Set Up I have divided my project into 3 npm packages: root, client, and server. Each package contains the specific dependencies it requires; for example, root has build tools, client has react, and server has express. While I understand that this ...

javascriptnode.jstypescriptnpmwebpack

The error message for validating my form magically disappears

I've been working on creating a registration form using HTML, Bootstrap, and JavaScript. My goal was to display an error message when a field is left empty, but for some reason, the error message appears briefly and disappears afterwards. I can't ...

javascripthtml