Target CSS rules for Firefox on mobile portrait only

Question

I would like to target some specific CSS rules for Firefox on Mobile Device in Portrait Mode Only

I Tried this but it doesn't work:

/* for firefox on mobile portrait only */

@-moz-document url-prefix() {
  @media only screen and (max-width: 480px) {
    .gallery_legend {
      padding-bottom: 26px;
    }
    .slide-nav {
      bottom: 11px;
    }
  }
}

MarioG8 · Answer 1 · 2021-10-28T14:54:47.953

0

Try like this ;-) You should firstly use media query, then @-moz-document url-prefix() and specify selectors. Here You Have simple example => codepen

@media only screen and (max-width: 480px) {
  @-moz-document url-prefix() {
    h1 {
      color: red;
    }
  }
}

So in Your Case should be:

@media only screen and (max-width: 480px) {
  @-moz-document url-prefix() {
    .gallery_legend {
      padding-bottom: 26px;
    }
    .slide-nav {
      bottom: 11px;
    }
  }
}

For IOS and firefox try this =>

@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 480px) {
    h1 {
      color: red;
    }
  }
}

edited Oct 28 '21 at 14:54

answered Oct 28 '21 at 13:47

MarioG8

5,122
4
13
29

I've tried on IOS using last firefox (v38). that unfortunately doesn't work – sprea Oct 28 '21 at 14:03
@sprea Ubuntu 20.04 I checked it now in firefox it works, chrome doesn't. You have the example above codepen, suggest reloading browser(hard refresh) and maybe add some background or color style to check it out ;-) – MarioG8 Oct 28 '21 at 14:12
sure, I tried with h1 {color: red;} but no changes.. the codepen doesn't work too on iPhone 11 pro in portrait mode. (h1 Text stay black) I tried to increase (max-width: 800px) but that doesn't change anything. – sprea Oct 28 '21 at 14:31
@spera Here you have the source, i used and it works ios iphone se firefox :-D ! example above;-) => https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices – MarioG8 Oct 28 '21 at 14:56
@sprea On my part, that's all, I must admit that your bug exhausted me a lot ... To please everyone, it can be difficult ...:-D The source I gave you explains a lot so read and I hope You will find it :D Best regards my friend ! – MarioG8 Oct 28 '21 at 15:13
thank for your help, unfortunately the last code you sent me `@supports (-webkit-touch-callout: none) { @media screen and (max-width: 480px)` is not for firefox+IOS. there is no firefox code at all, so it's not what I ask. this last code you sent work on any browser on IOS - I need every browser less with 480px max-width **on Firefox only** – sprea Oct 28 '21 at 15:23

Target CSS rules for Firefox on mobile portrait only

1 Answers1