Sat, 2017-11-25 20:39
Hi, I have a responsive website with left hand navigation.
When the site is viewed on desktop all is well, but when viewed on mobile device (phones) I have an annoying border left over from the navigation.
Image links:
Mobile
The issue is with this line of css: position:fixed;
@media (min-width: 0px) { .sidebar { display: block; position:fixed; top: 68px; bottom: 0; left: 0; z-index: 1000; display: block; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; background-color: #2E4051; box-shadow: 1px 0px 10px rgba(0, 0, 0, .05); }
How can I change position:fixed; when viewed via mobile phones?
Many thanks
Sat, 2017-11-25 21:34
#1
Just guessing
You can't debug images; there's no markup to work with.
Some guesses:
- Your responsive changes start with the mobile/s/, then you work your way up. That's backward.
- You're using the position property for major layout components. That's nearly always a Bad Idea™. Keep your elements in the flow; you will have a more bug-free page.
- Position:fixed; is user unfriendly. It takes up valuable screen real estate and if it were in the flow, the user could simply scroll to it if he wanted.
- Your "border" appears to be the desk-top's navigation container, not a border. Again debugging an image is a lost cause.
If you're learning from w3schools, don't. I haven't checked them out recently, but they have a long history of getting things wrong. Their name is confusing, but they are not related to the W3C specification writing body.
For well written tutorials on best practice, see HTMLDog.com
cheers, gary
Sun, 2017-11-26 08:06
#2
Hi Gary, Thank you for your
Hi Gary,
Thank you for your insightful comments. I'll re-address my code.
Thank you