Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

My website appears broken when viewing on Firefox only

more options

To recreate this bug, you need to be using mobile (on your phone), Firefox app, and set the browser to "request desktop site". The website appears fine on chrome or other mobile browsers, or in regular mobile mode (not desktop mode).

The theme on my site seems to break.

To recreate this bug, you need to be using mobile (on your phone), Firefox app, and set the browser to "request desktop site". The website appears fine on chrome or other mobile browsers, or in regular mobile mode (not desktop mode). The theme on my site seems to break.

Chosen solution

I notice that dress has a few holes in it. But then, I don't know anything about fashion.

Perhaps there is a different place in the page where the style rules are applied in an unexpected order. This is very hard to diagnose on mobile, so I was using the Page Inspector in Firefox on desktop, and turning different style rules on and off for different areas of the page. You could give it a spin and see if you can discover which rule in which file is causing the black background.

https://developer.mozilla.org/docs/Tools/Page_Inspector

Read this answer in context 👍 1

All Replies (10)

more options

Was it fine in Firefox 60 -- new issue in Firefox Beta?

Even if Firefox for Android identifies itself as a desktop version of Firefox (Linux instead of Android), the other parameters sites use to adapt the display remain in place, especially screen/window dimensions. Perhaps there is a gap in the theme's style rules where bad things happen??

more options

here are some screenshots of the broken theme.

the website is http://www.lulielens.com

more options

here is a picture of how it appears using desktop mode in any other browser

more options

Hmm. In your page, you have:

<style type="text/css">  @import "http://www.lulielens.com/wp-content/themes/mystiqueBACKUP/style.css";  @import "http://www.lulielens.com/?mystique=css"; </style>

The first style sheet sets that unusual background image:

#page{background:transparent url(images/header.jpg) no-repeat center top;}

Then the next one overrides it:

#page{background-image:url(http://www.lulielens.com/wp-content/uploads/2014/06/header-white.jpg);}

Something appears to be going wrong on FxA/RequestDesktop with either loading or applying the second style sheet, or the order in which they are applied.

As a test, could you add !important to the second rule to see whether it overrides the first one:

#page{background-image:url(http://www.lulielens.com/wp-content/uploads/2014/06/header-white.jpg) !important;}

If that makes no difference, Firefox may not be loading/applying the second style sheet.


This theme appears not to have had any updates for 6 years, so it could possibly use some assumptions that are no longer applicable. But I don't enjoy reading PHP so I must leave that question to others.

more options

what you wrote works somewhat! I have uploaded a screenshot of what the page looks like now.

how do you suggest I proceed?

Thanks so much for helping!

more options

I see the Logo is still not centered. So, I think Firefox might be applying the two style sheets in the wrong order.

As a temporary quick fix, what do you think about copy/pasting the 30 rules from the second style sheet (98 lines) to the end of the first one (979 lines)? It would be a little redundant to duplicate those rules, but should work around any issue with order of parsing.

more options

Just to clarify, the second style sheet is the "mystique/style.css" ? The file i am looking at has 1577 lines. Trying to find the files to edit them like you instructed.

Thanks again!

more options

These are the two I have in mind, but their location on the back end may vary:

more options

I found it! and applied the changes and now it's almost perfect. The only thing missing is that the background is black with a grey gradient on it..

Thank you a million times!

more options

Chosen Solution

I notice that dress has a few holes in it. But then, I don't know anything about fashion.

Perhaps there is a different place in the page where the style rules are applied in an unexpected order. This is very hard to diagnose on mobile, so I was using the Page Inspector in Firefox on desktop, and turning different style rules on and off for different areas of the page. You could give it a spin and see if you can discover which rule in which file is causing the black background.

https://developer.mozilla.org/docs/Tools/Page_Inspector