I have a portfolio site here: www.mrliger.com. When I open the site in any browser apart from Safari and resize the browser window, the menu at the top of the page changes styles as desired. However when I resize the browser window in Safari, the header restylesto how I desire but when enlarging the window again to full size the header becomes stacked... Have no idea what is causing this. Could someone please take a look and advise?
Thanks
Related
My website sidebar overlaps with the main content area on browser resize.
When viewed at 100% in Google Chrome
When viewed at 80% zoom
This is my website http://www.phebestephen.com/the-path-to-promise/
I am new to css and have very little idea on how to fix it. Please help!
Thank you
On horizontal resize my webpage becomes bugged, in particular at the breakpoint of 993px. 993px is defined in fullpagejs as the responsiveWidth:
responsiveWidth: '993'
Resizing on the first page of the website won't cause the bug, however resizing past the breakpoint(993px) on any other page causes the top pages to dissappear from the browser window.
Reloading the page will fix the bug, so I could reload the page every time the window is resized past the breakpoint(993px). However, I'm wondering if there's a better solution.
I am not sure if it's allowed but here is the link to my webpage so you can see for yourself:
http://forgetthe.fish/
In addition to fullpagejs I'm using bootstrap for the lay-out.
I am experiencing issues with the main logo link when the browser width is lower than 992px. It's working fine above this width.
Link is www.bestkennels.ie . If you visit any page and click the logo it should bring you back to the homepage. It seems only the top part of the logo is clickable. If i inspect in the dev tools i dont see any logo height issues.
I've tested in the latest Mac versions of Chrome and Firefox
Thanks for any advice.
The problem is that div#navbar is covering part of your clickable logo. Its height should not be so large. You should use a margin-top to properly separate the elements instead.
Dropbox recently updated their website layout where the first div occupies 100% of the window size and vertically centers the content irrespective of the browser height.
I am trying this layout for my own website. However I noticed when I open the website in chrome on my mobile on scroll there is an initial jump and then the page seems fine.
How do i get rid of this scroll jump?
You can check the same by visiting the Dropbox website on you mobile (Android or iOS)
[UPDATE] This happens when you scroll and the address bar hides.
This is the best solution (simplest) above everything I have tried.
You could set the height with CSS to 90vh for example, and then set the height to 0.9 * of the window height in px with javascript, when the document is loaded.
For example with jQuery:
$("#element").css("height", 0.9*$(window).height());
)
Unfortunately there isn't anything that works with pure CSS :P
See: This S.O. Question
I have a very simple website that creates a horizontal scrollbar in the following:
Android:
Chrome
Firefox
Opera Mini
Not in Android Default browser but the site looks broken
iOS:
Safari
It's really no big deal but I'm comparing my website to the full desktop site of http://google.com and Google's website doesn't get the same problem as mine.
I am still pretty new at CSS and HTML and I feel like I'm breaking some really simple rule I don't know about that is creating this problem. Any ideas on how to fix this?
If you would like to test it. Go to http://natio.in
The horizontal scroll bar is appearing because you have fixed width's set on elements, that when the site is viewed on a mobile browser, the width of those elements is set wider than that of the viewport width. If you use a percent for widths, your webpage will be able to adjust accordingly.
well, you can include overflow-x: hidden; in the styles for your body tag, but if there is content outside the width of the phone, you wont be able to get to it. Or you could crate a responsive layout with media queries.