Is there a way to align the Sidebar, Feed, and Widgets next to each other on my Twitter clone site?

I'm currently in the process of creating a platform similar to Twitter, but I'm having trouble getting the sidebar, feed, and widgets aligned correctly. Take a look at the image to see what I mean. How can I adjust their positions so that they line up properly? What steps do I need to take to ensure they stay side by side? View how the clone appears now

Below are the CSS codes for the app, sidebar, feed, and widgets. Please review them to see where the issue may lie. 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 (focusing on 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;
}
htmlcssreactjstwitter

Answer №1

Consider incorporating the following line into your CSS code:

.container {
    display: flex;
    flex-direction: row;
}

You can see a live demo here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking to pass the router.query variable to the API URL call, but finding it undefined during the initial render

I'm encountering an issue with the API Call snippet below: const router = useRouter(); const { albumQuery } = router.query; const [albums, setAlbums] = useState([]); const fetchAlbumsHandler = useCallback(async () => { setIsLoading(true); ...

reactjsnext.js

Issue with Bootstrap 4 progress bar malfunctioning in popover due to CSS property restrictions within the popover container

The following code functions correctly in the body area: <div class="progress" style="height: 25px;"> <div class="progress-bar" style="width: 30%;" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"> </div> & ...

htmlcsstwitter-bootstrap

What is the method to determine the size of a JSON object saved in localStorage?

I have a React JS application with a JSON object CartObj stored in localStorage in the following format: { "Master Automotives": [ { "SparePartID": "43", "Name": "Oil and Lubricants", "P ...

arraysjsonreactjslocal-storage

The printed Bootstrap web page is being truncated

I have a unique dynamic webpage created with Bootstrap that needs to be printable. I am implementing media queries for styling the page when printing: /** Custom Print Styles **/ @media print { header, .menu, footer { display: none; ...

jqueryhtmltwitter-bootstrapcss

How can I reset the validation method on a form when the first input field is clicked on? (Utilizing the jQuery Ajax Form Plugin and Magnific

Utilizing the jQuery Ajax Form Plugin in conjunction with the magnific popup plugin ajax type to update content dynamically. This is the form structure: <form method="post" action="/contact" id="contact_form"> <d ...

javascripthtmljqueryajaxjquery-forms-plugin

Photo collection showcasing images in separate lines, created with a single div element per row

Currently, I am studying Scss and experimenting with creating an Image gallery using SASS. I am attempting to utilize only one div tag for the entire image gallery as a row, avoiding the need for a new div for each row. Would it be feasible to achieve th ...

htmlcsssassflexboxcss-selectors

Modifying a string in PHP before inserting it into a database

I am looking to save a method for performing a specific task in a database field. However, I want to store this method as a string including HTML tags. For instance, the following list should be included: <ul> <li>List item</li> <li&g ...

phphtml

Is it possible to clear a row of images and then repopulate it with new images without losing the click listeners associated with each image?

I am currently developing a memory game that involves clicking on images as the main objective. After clicking on an image, the pictures are then rearranged on the page. However, if you click on the same image twice, you will lose and the game will reset. ...

javascriptjqueryhtmlbootstrap-4

Instructions for changing the color of the final character in a placeholder

Can you change the color of the last character in a placeholder text? I couldn't find any solutions related to this. <input type="text" class="f_name" name="fname" placeholder="First Name*"> It should look like the image below https://i.sstat ...

htmlcss

Should I include JSX or JS when exporting ReactJS components as node modules to npm?

I've been busy developing React.js components and sharing them as modules on npm. My approach involves utilizing a gulp task to convert all jsx components into js, leveraging gulp-react: var react = require('gulp-react'); gulp.task(' ...

javascriptnode.jsnpmgulpreactjs

Customize the appearance of Select options in Chakra UI by changing the text color and background

My select dropdown in ChakraUI looks like this: <Select color={"white"} bg={"black"}> <option value="option1">Option1</option> <option value="option2">Option2</option> </Selec ...

reactjsnext.jschakra-ui

Customize Bootstrap radio buttons to resemble standard buttons with added form validation styling

Is there a way to style radio buttons to look like normal buttons while maintaining their functionality and form validation? I have two radio buttons that need styling but should still behave like radio buttons. Additionally, I am utilizing Bootstrap for s ...

javascriptjqueryhtmlcssbootstrap-4

PHP: Extracting the selected value from a dropdown menu and incorporating it into an HTML link

Initially, I created a dropdown list Yet, there is uncertainty surrounding how to incorporate the selected choice (variable) into the input of the HTML <p style="text-align:center"> COVID-19 Checker</p> <br> <label for ...

javascriptphphtmlbuttondropdown

Displaying a specific show action on the index page using Rails

Currently, I have an index table displaying all subscribers with a link_to that directs to the individual subscriber's show page. However, I am interested in implementing a modal that will display the show page information in front of the index page. ...

cssruby-on-railsajax

Creating a dynamic star rating system using CSS

A unique code pen project showcasing a pure css star rating interface can be found at: https://codepen.io/yaworek/pen/JJpEaZ Below is the custom css part: /*** * Custom Pure CSS Star Rating Widget for Bootstrap 4 * * www.TheMastercut.co * ***/ ...

javascriptjqueryhtmlcss

Tips for concealing a source element when it is hidden

Even with the use of display: none, the contents of the element remain visible in the source code. Could techniques such as JavaScript, PHP, or any other method be employed to avoid this issue? ...

javascriptphpjquerycssview-source

Typescript CRA linting

Looking to automate linting for TS files in your react App using CRA and react-scripts 3.1.2? Tslint is being deprecated, prompting the react community to transition to ESlint. In your package.json file, you might see something like this: "eslintConfi ...

reactjseslinttslintreact-scripts

Can multiple if statements be executed simultaneously in plain Javascript? If yes, what is the method to do so?

Currently, I'm developing a game using canvas in HTML, CSS, and vanilla JavaScript. I've successfully created two characters with movement controls assigned to player 1 and player 2. However, a challenge arises when waiting for one player to move ...

javascriptcsshtmlif-statementhtml5-canvas

NextJS 13: Handler Route Request With Invalid JSON Format

Currently utilizing the most recent Next.JS 13 Route Handler to process data submitted by a form. I'm encountering an issue where the new Route Handler isn't working as expected, even though I followed the documentation provided in the link above ...

javascriptreactjsnext.jsnext.js13

Customizing an external module class using CSS module pattern in React

Is there a way to locally override an external module's CSS class for a specific component? Here is my current code: import `style` from './style.module.css' // local CSS module import `ExternalComponent` from 'ExternalComponent&apos ...

cssreactjscss-modulesreact-css-modulesbabel-plugin-react-css-modules