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

Create PDFs using PhantomJS when the HTML content is fully loaded and ready

I am a newcomer to utilizing phantomjs and encountering difficulties in rendering my website as a PDF file. Although I can successfully render a simple version of the page, issues arise when multiple images and web fonts are involved, causing the DOM not t ...

javascriptnode.jspdfphantomjs

Exploring the dynamic animation of jQuery slideDown with the layout manipulation of

My current project involves using an HTML table with multiple rows. I have hidden every second row, which contains details about the preceding row, using CSS. Upon clicking the first row, I am utilizing jQuery's show() function to display the second ...

jqueryhtmlcssuser-interface

What is the material-ui component that mirrors the functionality of <input type="color"><datalist>?

I'm just starting out with javascript, react, and Material-UI, so my question (along with the code sample) might show my lack of experience. Within a Material-UI TableCell (not a form), I have the following code: <input type="color" name ...

javascripthtmlreactjsmaterial-ui

Operators within an observable that perform actions after a specific duration has elapsed

Is there a way in an rxjs observable chain to perform a task with access to the current value of the observable after a specific time interval has elapsed? I'm essentially looking for a functionality akin to the tap operator, but one that triggers onl ...

javascriptangulartypescriptrxjsrxjs-pipeable-operators

Setting both the height and row height of the table is not allowed

Currently employing js DataTable, I aim to establish a default height for the table and row. My current approach is as follows: $(document).ready(function() { var table = $('#example').DataTable ({ iDisplayLength: 15, "bLen ...

jqueryhtmlcss

Creating effective href anchors within an iframe using the `srcdoc` attribute

While loading some HTML content in an iframe using the srcdoc attribute, I encountered an issue where following anchor tag links inside the iframe caused the entire page to load within the iframe instead of scrolling to the linked id. You can see a demons ...

javascripthtmlcssiframe

Implementing jQuery and JavaScript validation for email addresses and usernames

Are the online validations being used incorrectly or is there a serious issue with them? I came across an example of a site using jQuery validation, but when I entered "44" for a name and ##@yahoo.com for an email address, no warning appeared. I haven&apo ...

javascriptjqueryvalidation

Is it possible to use styled-components to specifically style a child class within a component?

Hey there, I'm currently working with a mui Badge component and am trying to customize the appearance of the small circle. This is what I have so far: const BadgeStyled = styled(Badge)` & > .muibadge-badge: { background-color: #d3d4d7; ...

cssmaterial-uistyled-components

Unable to display an image prior to its upload

I'm facing an issue with changing the image for my second data. It's not updating, but when I try it with the first data, it works fine. I'm unsure why this is happening and would appreciate any help in resolving it. Here is the form where ...

javascriptphpjqueryimage-uploadingpreview

Exploring the potential of overflow within a container with a percentage-based

I am attempting to design a webpage that fills the entire screen height without scroll bars, yet contains a scrollable container within it. Despite trying various approaches with percentage heights, I have not been successful as the percentages do not beha ...

htmlcss

How do I retrieve and display all the locally stored variables in Angular 2/JavaScript and calculate the total number of keys present in the localStorage?

Currently, I'm developing a project in Angular2 that involves the storage of user-added items to a shopping cart. To accomplish this, I have opted to utilize local storage to temporarily save the items. Each category (such as shoes, clothes, etc.) is ...

javascriptangular

How can you ensure seamless synchronization while logging in a user with ReactJS and retrieving data from the API?

Is there a way to synchronize and run these two functions in succession before calling console.log(user) and setLogin()? The goal is to ensure that all the information retrieved from the API is available in the user context before activating the setLogin() ...

javascriptreactjsasynchronous

Building a PathString Tree

I encountered a similar issue like the one discussed in this post (Get a tree like structure out of path string). I attempted to implement the suggested solution but I am facing difficulties getting it to work within an Angular context. The concept involv ...

javascriptarraysangulartypescripttree

What is the best way to output a JSX element using an inline switch statement?

I have been attempting to use an inline switch in order to return an element, but all I am getting is an empty <span> </span>. What could be the issue here? getRowTdForHeader: (header: string, entry: response) => { return (< ...

javascriptreactjstypescript

"Selecting an element through Drag/Drop will result in the element being

INQUIRY I've encountered an issue with a draggable element ($("#draggable")) that interacts with a checkbox ($('#checkable')). When the $('#draggable') is dragged onto a box ($('#droppable')), it checks $(&apos ...

javascriptjqueryhtmljquery-uidrag-and-drop

An asynchronized code block processes an array of multiple Ajax deferred calls, concluding with a synchronous final code block

I am new to the world of jQuery and AJAX and I'm currently exploring how deferrals and promises can help me solve a particular issue. Here's what I'm trying to achieve: I want to make calls to multiple URLs, process the returned results in p ...

javascriptjqueryajaxjquery-deferred

Trigger a jQuery event when an element is moved to a new line

Is there a way to trigger a jQuery event when an element moves to a new line in the view? I want to hide navigation items and run additional JavaScript code when this happens. Any ideas on how to achieve this? Here's how my navigation appears in a wi ...

javascriptjquery

Error message: "The jQuery function is unable to recognize the

I am working with a JSON object that looks like this: {"a":"111","b":"7"} In addition, I have a select box with options for "a" and "b". I want the selected value to display either "111" or "7" from the JSON object. Here is the jQuery code I wrote for t ...

javascriptjqueryjson

Completing Forms Automatically with AngularJS

Hello! I'm just starting out with ng and I need to make an autocomplete textbox that will initiate an AJAX call when the text is changed. The catch is that the minimum length required to trigger the AJAX call is 3 characters. However, once the user en ...

javascriptangularjsajaxautocompletejquery-ui-autocomplete

Prevent users from tabbing to the next input field in a web form

Is it possible to prevent users from using the tab button on their keyboard to navigate to the next field in a form? <form action="/action_page.php"> First name:<br> <input type="text" name="firstname"> <br> Last name:< ...

javascriptjqueryhtmlweb