My website appears broken when viewing on Firefox only
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.
Izabrano rješenje
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
Pročitajte ovaj odgovor sa objašnjenjem 👍 1All Replies (10)
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??
here are some screenshots of the broken theme.
the website is http://www.lulielens.com
here is a picture of how it appears using desktop mode in any other browser
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);}
;){kind=link}
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.
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!
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.
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!
These are the two I have in mind, but their location on the back end may vary:
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!
Odabrano rješenje
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.