0
2

[–] Nurdoidz 0 points 2 points (+2|-0) ago  (edited ago)

You came to the right place!

It looks like you adopted some of my old code, so I know what the problem is. To prevent the links and posts from going to the other side of the screen and under the sidebar (which made it look odd), the margins have been altered. Here is the part of your code that's doing it:

.link {
    margin-right: 320px;
}

To alleviate this when the screen is small, we need to add media queries. Here is the basic structure of a media query for screen size:

[@media](https://voat.co/u/media) (max-width: 0px) and (min-width: 0px) {
    /* some code here */
}

There are two values to be set here. max-width and min-width. They both correspond to the screen size the page is being viewed on. Let's say you want to remove the sidebar and extend the links when the screen becomes smaller than 800 pixels. Here is how to do it:

[@media](https://voat.co/u/media) (max-width: 800px) {
    .side {display: none;} /* hides the sidebar */
    .link {margin-right: 10px;} /* extends the link margins */
}

You can also have multiple media queries, too. Let's say we want the sidebar to be thinner when the screen width is less than 800 pixels, then hide it when the screen width is less than 600 pixels.

[@media](https://voat.co/u/media) (max-width: 800px) and (min-width: 600px) {
    .side {width: 150px;} /* thins the sidebar */
    .link {margin-right: 170px;} /* extends the link to compensate */
}
[@media](https://voat.co/u/media) (max-width: 600px) {
    .side {display: none;} /* hides the sidebar */
    .link {margin-right: 10px;} /* extends the link margins all the way */
}

Good luck!

0
1

[–] Cult_films [S] 0 points 1 point (+1|-0) ago 

Thank you!