CODEWITHSUNDEEP
javascripthtmlcssreactjs
Lyna
Lyna

Reputation: 11

How to adjust the sidebar size in React

I am new to react, and I am working on my first project, following https://www.youtube.com/watch?v=qwM23_kF4v4.

At the very beginning, I followed all the steps and tries to set a sidebar on the left with "240px", the expected is as left, but what I made is as right.

The code is below. I only add the sidemenu part.

I have rechecked the code in the video many times, but it still shows as below. Furthermore, I expected the sidebar to be 50% of the screen, as shown in the video.

I have changed the sidemenu width as "100%", "40vmin", but nothing works. What I have tried is as follows in App.css:

.sidemenu {
  width: 1000px;
  border:1px solid white;
}

My App.js code is as follows:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
     <aside className="sidemenua">
       <h1>Aside</h1>
     </aside>
     <section>

     </section>
     <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <p>
        Edit <code>src/App.js</code> and save to reload.
      </p>
      <a
        className="App-link"
        href="https://reactjs.org"
        target="_blank"
        rel="noopener noreferrer"
      >
        Learn React
      </a>
    </header>
   </div>
);
}
 export default App;

Expected layout

My layout

Upvotes: 1

Views: 853

Answers (1)

Vishnu
Vishnu

Reputation: 21

please check your className is differ from css selector name it should be sidemenu.

<aside className="sidemenu">
    <h1>Aside</h1>
</aside>

Upvotes: 2

Related Questions