0

The working on a project I can't understand why the heights of my components are fixed around 200px to 500px randomly.

I have tried adding height to the root id, but it doesn't affect the div they remain the same.

I'm adding a screenshot for better understanding:

root id default height

What will be the best way to fix this, as my goal is to make this project dynamic. When I add more fields or elements, then this will be the big problem, causing other elements to lap over - like my footer is overlapping the elements, if I want to add more as in the image:

footer overlapping

Global CSS Variables:

:root{
  --clr-white: #fff;
  --clr-black: #111;
  --clr-grey-light: #f7f7f7;
  --clr-grey-lighter: #ebebeb;
  --clr-grey-lightest: #d8d8d8;
  --clr-grey-dark: #999;
  --clr-grey-darker: #777;
  --clr-grey-darkest: #333;
  --transition: all 0.3s linear;
  --spacing: 0.25rem;
  --radius: 2rem;
  --sm-radius: 1rem;
  --light-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  --light-shadow-white: 0 0 10px rgba(200, 200, 200, 0.1);
  --dark-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  --dark-shadow-white: 0 0 10px rgba(200, 200, 200, 0.3);
  --max-width: 1170px;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  font-size: 16px;
  background: var(--clr-black);
  font-family: futuramedium;
}
.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 10vw;
}
Gleb Kemarsky
  • 10,160
  • 7
  • 43
  • 68
Vaibhav Agarwal
  • 3
  • 4
  • 1
    Can you include more code relevant to the CSS on the root element or maybe a link to a full example? – Henry Woody Nov 23 '21 at 18:31
  • 1
    Unfortunately, there is not enough information. Perhaps the container contains floating children and is therefore [collapsing its height](https://stackoverflow.com/q/218760/6263942)? Or something different? One can only guess ... – Gleb Kemarsky Nov 23 '21 at 18:33

0 Answers0