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
Related
Having trouble with the background images while scrolling on a mobile device. The images work fine while Inspecting the website and setting it to mobile view, but when I use an actual mobile device the images are zoomed in and blurry.
Im having trouble with the navigation too when Im on a page post.. I cant get back to the main page since the nav links are anchored to the main page in specific spots.
Any help would be amazing! Thanks
http://www.wearesettv.com/
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.
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
My website is http://www.clinkstr.com and I have 2 forms on the front page. When I zoomed all the way out in Chrome, the forms and the background will move down a lot. Can someone look at my CSS and HTML code and see if I did something wrong? And also, in IE, background-size: cover won't cover the entire screen when zooming in or out.
Its because you have absolutely positioned them making them not apart of the flow.
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