I have a strange issue happening just in Firefox that disappear when I resize the browser page.
The issue is on the header, normally, on a Desktop mode, the logo it's in the center with two menu, one on the left and one on the right. In Firefox I see just the logo on the left and the menu all on the right part.
I tried to explore the code and see where this issue is coming from but I can't find any solution. Can someone help me please?
https://ruggerocarrara.com
Thank you so much!
Related
I'm working on a website and I have 2 problems with it for mobile devices. The problems may be linked.
If you go to this website on mobile - website
You will see that even though there's no element overflowing, the page can be scrolled left and right. I can't figure out why. I want the page to be stable, no left/right scrolling, as there's nothing to see on the right side.
The website only has 4 pages, but this happens on each page. But from what I can tell the width is 100%, so it shouldn't be happening.
And on the "ABOUT" page there are 3 images on the right, and for some reason they don't want to be centered when the site is viewed on mobile devices. They just overflow there.
Can anyone tell me how I can fix this?
The problem was solved. Marko Mackic pointed out the logo was too wide, and helped me fix it.
I've been struggling with this problem for a few days now. Navigation bar on my page hides browser scrollbars. This happens in Chrome (both desktop and mobile) and Firefox - I didn't chceck other browsers yet but I suppose the result will be the same.
I tried like every single solution I found on Google and Stack Overflow but none of them fully worked. The navbar either kept covering the scrollbars or it wasn't clickable because it was under the rest of the page.
Can somebody browse my CSS and help me with this problem? Thanks a lot!
P.S.: I use no CSS framework. I downloaded the template from here and sligtly modified it.
I'm facing a problem I can't figure out how to solve. I'm almost sure this is a Chrome bug since in other browsers it works like a charm but I want to be sure. On my website, developed using a mobile first and responsive design approach, I have a menu that uses the Left Nav Flyout pattern. On Tablets and desktops, I show it full width.
When I load the website on my smartphone (specifically an Android device) using Chrome in Portrait mode, once I rotate the device (passing in Landscape mode) and start to scroll the page, as soon as I reach the menu position, the latter magically disappears. What is really strange is that if you try to click the space that now is completely white, you can see that the links are actually there. I tried to use the inspector to find the problem but didn't succeed.
So, wow can I solve the problem? Anyone else had this issue before? If you know it's a bug, I'm glad to add a temporary workaround as well.
I didn't find a real solution but a reasonable workaround. Of course, I still hope that someone will explain what's the cause of this issue and how to solve it.
In the meantime, I found that the problem occurs because the menu, 240px wide, is completely out of the viewport. In fact, as soon as I changed the margin-left to 239.5px the menu didn't disappear anymore.
Here is the site: http://lju-silenter.rhcloud.com . If you load the site on chrome and then click on the yellow section, then the section completely fills the entire screen, however in firefox, there appears to be some problem with margins. I've looked through firebug, I can't seem to find what is causing the issue. Here are two images just to clarify what's going on:
Chrome version:
Firefox version:
Any insight into the issue would be really helpful. Thanks!
By navigating to #three, the browser may scroll to bring that element into view, even if you have overflow:hidden. It appears IE and Firefox do this, while Chrome does not.
You should change the ID of the target element to something like id="box-three", then make sure you adjust selectors accordingly to add that prefix.
I have recently launched a site built on word press using a heavily edited child theme of the twenty ten theme, the problem is when viewed in google chrome or safari a small portion of the left hand border on the sidebar sat on the left is displaying the wrong colour. Its not a big issue and it goes away when you scroll to the bottom of the page, its more annoying than anything just wondering if any one else had encountered this.
I am using different colour borders to get the pressed in effect if this matters.
The site is located at www.paintedroom.co.uk
I have found what is causing this bug it is the border-radius property. when removed the bug goes away still not sure how to fix though.