![I-Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
Pages load to the far right of browser. Can't view them
My homepage loads properly in firefox. My pages within the site don't load properly. All content is off to the far right of the screen. It is impossible to view page content.
Site performs normally in Chrome and Safari.
homepage: http://hauteaudio.com
examples of pages that don't load properly: http://hauteaudio.com/blog/ http://hauteaudio.com/careers/ http://hauteaudio.com/our-team/
All Replies (5)
This appears to be a one-page site with a vertical design. Did it change from previously having a horizontal design?
In case you haven't tried the usual:
When you have a problem with one particular site, a good "first thing to try" is clearing your Firefox cache and deleting your saved cookies for the site.
(1) Bypass Firefox's Cache
You can clear Firefox's cache using:
"3-bar" menu button (or Firefox menu) > Preferences > Advanced
On the Network mini-tab > Cached Web Content : "Clear Now"
If you have a large hard drive, this might take a few minutes.
(2) Remove the site's cookies (save any pending work first). While viewing a page on the site, try either:
- right-click and choose View Page Info > Security > "View Cookies"
- (menu bar) Tools > Page Info > Security > "View Cookies"
- click the globe or padlock icon in the address bar > More Information > "View Cookies"
In the dialog that opens, you can remove the site's cookies individually.
Then try reloading the page. Does that help?
Unfortunately, That didn't help.
Content is off the screen to the right. As soon as I begin to scroll down, the content move to its proper location.
example: http://hauteaudio.com/blog/
Sorry, I only navigated around on the home page because the links didn't take me to those other pages.
On /blog and /our-team the problem is that there is excess padding here:
nav #fluid-nav > li { padding-bottom: 16px; }
This causes the ul to stick out of the 50px top bar 12px lower than intended. You could reduce that padding-bottom to 4px or add margin-top:12px to div.content-wrapper as a workaround.
Looks like an issue with floating content and a missing clear:both
Test in Web Console:
javascript:(function(){var doc=document,css=doc.createElement('link');css.rel='stylesheet';css.type='text/css';css.href='data:text/css,div.content-wrapper{clear:both}';doc.documentElement.childNodes[1].appendChild(css);})();
Okulungisiwe