2 replies [Last post]
qball777
qball777's picture
Offline
newbie
Last seen: 2 years 2 weeks ago
Joined: 2017-11-25
Posts: 5
Points: 6

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

Desktop view

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 19 hours 13 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

qball777
qball777's picture
Offline
newbie
Last seen: 2 years 2 weeks ago
Joined: 2017-11-25
Posts: 5
Points: 6

Hi Gary, Thank you for your

Hi Gary,

Thank you for your insightful comments. I'll re-address my code.

Thank you