Website layout is showing different than original
Hello, I'm using Firefox to manage my website but when I open my blog in Firefox my site's layout is not showing like the original one with header menu but showing mobile toggle menu on Desktop, in Chrome it's showing with header menu, I don't know what's the reason behind it, my users also complained about that, can someone open my site in Mozilla to confirm if they are also experiencing it or only me? Screenshot of Mozilla and Chrome is also attached below. Thanks! Here is my blog: https://writions.com/
All Replies (6)
I think you are talking about the Facebook and other icons, yes?
Make sure you are not blocking content.
Diagnose Firefox issues using Troubleshoot(Safe) Mode {web link}
A small dialog should appear. Click Start In Troubleshoot(Safe) Mode (not Refresh). Is the problem still there?
https://support.mozilla.org/en-US/kb/enhanced-tracking-protection-firefox-desktop
Many site issues can be caused by corrupt cookies or cache.
Warning ! ! This will log you out of sites you're logged in to. You may also lose any settings for that website.
- How to clear the Firefox cache {web link}acking-protection-firefox-desktop
No, I'm not talking about Facebook and other social icons only, I'm talking about whole menu bar disappears and mobile toggle shows.
You get the mobile layout if the screen dimensions are below a specific width (1000px), so you need to make the window wider or zoom out the page to force the menu bar. This is about the dimensions reported by JavaScript, so the Windows DPI setting affects this.
cor-el said
You get the mobile layout if the screen dimensions are below a specific width (1000px), so you need to make the window wider or zoom out the page to force the menu bar. This is about the dimensions reported by JavaScript, so the Windows DPI setting affects this.
Have you checked yourself too? I'm not sure what's the reason why both browsers are showing different even dimensions are same.
I am not getting a toggle menu but there are wide blank spaces either side of the content below the header. The content below the header occupies a little over one-third of the width of the screen.
It looks that Firefox in the first screenshot shows the page a little zoomed compared to the second screenshot. This can be caused by Firefox applying a default DPI setting of about 125%. You can try to zoom out one step (Ctrl + -) to see if that makes a difference.