How do I set my sidebar, feed and widgets side to side?


Hey guys! I am building a twitter clone and the sidebar, feed and widgets are not properly aligned as you can see in the picture. What should I do so that I can realign and put them in correct positions? How do I keep them side to side?

flex, grid… something like that

It is pretty typical on here for people to share a codepen / repl.it / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.

Please provide some example of what you’ve tried and I’m sure you’ll get more help.

Happy coding :slight_smile:

1 Like

I would agree, use a combination of flexbox and grid. I think that would follow modern convention and standards.

Otherwise use float and position properties, but this tends to get messy.

1 Like

Hey I asked people in stack overflow but ended up getting responses that didn’t work. I will provide my css codes for the app, sidebar, feed and the widgets. Please check where I could’ve gone wrong.
For APP:
body {

–twitter-color: #50b7f5;

–twitter-background: #e6ecf0;

}

.app {

display: flex;

height: 100vh;

max-width: 1300px;

margin-left: auto;

margin-right: auto;

padding: 0 10px;

}

For feed (just including the positioning):
.feed {

flex: 0.4;

border-right: 1px solid var(–twitter-background);

min-width: fit-content;

overflow-y: scroll;

for sidebar:
.sidebar {

border-right: 1px solid var(–twitter-color);

flex: 0.25;

min-width: 250px;

padding-top: 20px;

padding-left: 20px;

padding-right: 20px;

}

for widgets:
.widgets {

flex: 0.3;

}

I have no idea what that code does like that. Please show a codepen / repl.it with your code, or even a githun repository

Rather unreadable in this format. Shiukd be able to copy and paste code into a codepen so we are able to see better.