Css sidebar static

Question

I wanted to left sidebar and margin line stay in place while someone scrolls down the site . But the sidebar keeps changing it's position here with screen resizing. Any fixes?

@media only screen and (max-width: 550px) {
    .side-bar-icon {
        display: none;
    }
    .side-line {
        position: relative;
        max-width: 36rem;
        border-right: none; !important;
        border-bottom: thick solid #ef4a60;
        padding-bottom: 30px;
        margin-bottom: 50px;
    }

Reference code here

Here is a similar problem: http://stackoverflow.com/questions/15590803/how-to-implement-fixed-sidebar-correctly — Smooth Fire, Aug 18 '16 at 09:23
Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). Although you have provided a [**link to an example or site**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it), if the link were to become invalid, your question would be of no value to other future SO users with the same problem. — Paulie_D, Aug 18 '16 at 11:12

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

@media (min-width: 550px)
.eight.columns {
    width: 65.3333333333%;
    /* margin-left: 45%; comment this out*/
} 

.side-bar {
    position: relative;/* change fixed to relative */
    top: 1;
    left: 1;
}

Just an add on, using !important is very bad practice until and unless very-very important. Just an advice!

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 18 '16 at 12:52

Smit

2,078
2
17
40

Any changes to `.side-line`? should the @media above this https://github.com/abhigenie92/django-resumator/blob/temp_version/resumator/static/resumator/css/base.css#L15? – Abhishek Bhatia Aug 18 '16 at 13:12
@AbhishekBhatia .eight.columns is under a different class named `eight columns content`! Now i see your side in a right format! dont you? – Smit Aug 18 '16 at 13:50
I haven't changed anything on site, it is still incorrect. When I made your change using browser tools I got this http://i.stack.imgur.com/RYefQ.png . Am I doing something wrong? – Abhishek Bhatia Aug 18 '16 at 14:06
@AbhishekBhatia see the image! will solve the problem! :) – Smit Aug 18 '16 at 14:08
Thanks for the posting the image. I tried that but still doesn't work - http://imgur.com/a/vHcBu . Maybe I am missing something, please check the complete code here https://bpaste.net/show/5dfae54877de – Abhishek Bhatia Aug 18 '16 at 14:16
@AbhishekBhatia this what i see http://tinypic.com/r/ou5nrc/9 this is my github id if you need my help on website `shah-smit` – Smit Aug 18 '16 at 14:21
Oh, please refer to this site abhishekb.herokuapp.com . That was a site without fixed sidebar while scrolling. – Abhishek Bhatia Aug 18 '16 at 14:25
@AbhishekBhatia even after making two changes, i see the following pic http://tinypic.com/r/r90i6c/9 is this what u wanted? – Smit Aug 18 '16 at 14:32
Oh weird, I commited your code the site abhishekb.herokuapp.com . Please check once more if possible. – Abhishek Bhatia Aug 18 '16 at 14:39

Css sidebar static

1 Answers1