Can't properly set width in next.js Layout - React, Next.js, CSS

HTML-CSS
1

I’m being crazy with this thing. I’m building a Portfolio with Next.js, React and simple CSS. The layout that I want to get is this:

Screenshot from 2023-02-08 15-21-48

The Header, Nav and Footer are inside a wrapper, and the wrapper is inside a container with the main. I want to set the width of the wrapper as something like 30vw but I’m not able to do it because when I set every size, it doesn’t reflect it, except when I set also the width of main. All of this is inside a Layout component, because it should be shared between the other pages.

.container {
  min-height: 100vh;
  display: flex;
}

/* --------------- WRAPPER --------------- */
.wrapper {
  width: 30vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.header {
  width: 100%;
  background-color: blue;
}
.navigation {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgb(64, 156, 156);
}
.footer {
  width: 100%;
  background-color: darkslategray;
}
/* --------------- MAIN --------------- */
.main {
  background-color: brown;
}

Which is the problem? Here is the link to Github repo to understand better the whole.

2

you forgot to add github link or any live link for that matter :slight_smile:

happy portfollioing :slight_smile:

3

Thanks, I edited the above answer!

4

seem like you changed your “navigation” style a bit,

.wrapper {
  width: 700px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

btw do you have it live on somewhere, cause im not sure i understand why that would be so!!

but may be try giving “container” some width and see if that reflects to your “expected” result :slight_smile:

5

They are flex items. They share the container space as needed. If you add flex: 1 to main it might work a bit more as you intended.

30vw is quite a lot on large screens, you might want to limit the max width. Or maybe just make the navigation a fixed width and do the responsive design as needed. Usually, this type of side navigation does not need to shrink and grow much, if at all.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.