2

I developed an extension for Firefox with an option popup for preferences.

On mobile, as it doesn't open as a popup but as a new tab moz-extension://(...)/popup.html, I had to apply some specific CSS media queries.

But as you can see below, it's definitely not working.

What should I do ?

CSS page is here https://github.com/ANN-MB/LEIA/blob/master/extension%20firefox/leia.css

enter image description here

Community
  • 1
  • 1
Ann MB
  • 146
  • 1
  • 13

2 Answers2

1

I solved the problem.

It wasn't about media queries but because my manifest.json looked like this :

"options_ui": {
    "page": "config.html",
    "browser_style": false,
    "open_in_tab": true
  }

It seems that when open_in_tab is set to true, the Firefox Mobile Browser opens the option page with the desktop display (don't ask me why).

So turning "open_in_tab" to false gave me the good render.

Ann MB
  • 146
  • 1
  • 13
0

But you need @media querys for wanted solutions! Your Medium is provide an max range of size, you only need is to declare your style on diffents sizeranges:

@media(min-width:XXXpx) {
    // your style here
}

for more information take a look at this: https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488

Toxi
  • 109
  • 5
  • Already did that but wasn't working. I erased them all. I'd like an idea to keep fonts and ` – Ann MB May 31 '19 at 22:16
  • 1
    OK, can you post your not working media query´s please? Did you add your custom css code as last of all styles? Otherwise it can be overwritten by other stylesheets. Also sometimes can help "!important" e.g.: `@media(min-width:XXXpx) { .your-class {with:80%!important;} }` – Toxi Jun 01 '19 at 07:33