X
Tap here to go to the mobile version of the site.

Support Forum

My website appears broken when viewing on Firefox only

Posted

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

Additional System Details

Application

  • User Agent: Mozilla/5.0 (Android 8.0.0; Mobile; rv:61.0) Gecko/61.0 Firefox/61.0

More Information

jscher2000
  • Top 10 Contributor
8692 solutions 71041 answers

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??

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??

Question owner

here are some screenshots of the broken theme.

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

here are some screenshots of the broken theme. the website is http://www.lulielens.com

Question owner

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

here is a picture of how it appears using desktop mode in any other browser
jscher2000
  • Top 10 Contributor
8692 solutions 71041 answers

Helpful Reply

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.

Hmm. In your page, you have: <code>&lt;style type="text/css"&gt; &nbsp;@import "http://www.lulielens.com/wp-content/themes/mystiqueBACKUP/style.css"; &nbsp;@import "http://www.lulielens.com/?mystique=css"; &lt;/style&gt;</code> The first style sheet sets that unusual background image: <code>#page{background:transparent url(images/header.jpg) no-repeat center top;}</code> Then the next one overrides it: <code>#page{background-image:url(http://www.lulielens.com/wp-content/uploads/2014/06/header-white.jpg);}</code> 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: <code>#page{background-image:url(http://www.lulielens.com/wp-content/uploads/2014/06/header-white.jpg) '''!important''';}</code> 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.

Question owner

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!

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!
jscher2000
  • Top 10 Contributor
8692 solutions 71041 answers

Helpful Reply

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.

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.

Question owner

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!

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!
jscher2000
  • Top 10 Contributor
8692 solutions 71041 answers

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

These are the two I have in mind, but their location on the back end may vary: * (long one) http://www.lulielens.com/wp-content/themes/mystiqueBACKUP/style.css * (short one) http://www.lulielens.com/?mystique=css

Question owner

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!

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!
jscher2000
  • Top 10 Contributor
8692 solutions 71041 answers

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

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