16854

Media queries not work in firefox

Question:

I have added following media query for my php project to hide an image when screen width is 1254px.

@media screen and (max-width: 1255px ) { .visible-desktop { display: none; } }

It works on Chrome correctly but it's not working on Firefox. Can anyone help me to solve this problem?

Answer1:

Your media query is right and working perfectly in chrome and in firefox.

<a href="https://jsfiddle.net/9fpz4dx4/1/" rel="nofollow">As you can see on this JSFiddle...</a>

I guess (since we dont have any more code) .visible-desktop's display is being setted on some other position where you cant override it with your none. You could try using !important, which is not a beauty way, but can fix it in most times, but also not everytime.

display: none !important;

Answer2:

Your Code completely Worked.

<strong>See Live Demo</strong> <a href="https://jsfiddle.net/patelsumit5192/y5zeypc1/" rel="nofollow">Here</a>

And Check This Url in Firefox. then Also work. i also try . See Image

<a href="https://i.stack.imgur.com/3AvFd.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/3AvFd.png" data-original="https://i.stack.imgur.com/3AvFd.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

<strong>Snippet Example</strong>

<pre class="snippet-code-css lang-css prettyprint-override"> @media screen and (max-width: 1255px) { .visible-desktop{ display: none; } } <pre class="snippet-code-html lang-html prettyprint-override"><div class="visible-desktop"> Hello visible-desktop Class </div>

Recommend

  • Slow performance in hybrid AngularJS and Angular application in Safari
  • Change the font color of disabled input text box?
  • How to get the click event on sIFR embedded tag in IE?
  • Understanding Intl.DateTimeFormat as a JavaScript object
  • Position Fixed in Chrome
  • Visual studio 2015 keystroke with mouse button
  • how to display   in Mozilla using XSL.
  • Is there a way to clone native functions in javascript like window.alert or document.write
  • Cursor in wrong place in contenteditable
  • Unable to click on the next page button containing “>” sign
  • Is there a way to set up a fallback for the formAction attribute in HTML5?
  • Create function that can pass a parameter without making a new component
  • Alamofire and Reachability.swift not working on xCode8-beta5
  • Problems with toDataURL HTML5 other ways to get canvas data?
  • cell spacing in div table
  • How can we prepend rows to a react native list-view?
  • Multicolored edittext hint
  • Redux Form - Not able to type anything in input
  • Is playing sound in Javascript performance heavy?
  • How can I sort a a table with VBA with given text condition?
  • Chrome doesn't support silverlight anymore? How to solve this?
  • How to clear text inside text field when radio button is select
  • All Classes Conforming to Protocol Inherit Default Implementation
  • Display issues when we change from one jquery mobile page to another in firefox
  • Ajax jQuery multiple calls at the same time - long wait for answer and not able to cancel
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • How to recover from a Spring Social ExpiredAuthorizationException
  • ILMerge & Keep Assembly Name
  • Javascript convert timezone issue
  • ActionScript 2 vs ActionScript 3 performance
  • Large data - storage and query
  • To display the title for the current loaction in map in iphone
  • ORA-29908: missing primary invocation for ancillary operator
  • WOWZA + RTMP + HTML5 Playback?
  • Traverse Array and Display in markup
  • Matrix multiplication with MKL
  • How to set the response of a form post action to a iframe source?
  • Hits per day in Google Big Query
  • File not found error Google Drive API
  • Converting MP3 duration time