CODEWITHSUNDEEP
javascripthtmlcssstyling
Diemauerdk
Diemauerdk

Reputation: 5928

CSS - how to make dynamic padding of children within a container

I am trying to make dynamic padding within a container and are having some trouble with that.

If I for example have this html

<div class="sections-container">
  <div class="section"> </div>
  <div class="section"> </div>
</div>

and this styling

.sections-container {
  border: 1px solid black;
  width: 90%;
  height: 400px;
  padding: 2.4rem;
}

.section {
  border: 1px solid black;
  width: 100%;
  height: 100px;
  margin-top: 24px;
}

then the padding in the container is hardcoded to be 24px. You can see it at this stackblitz example: https://stackblitz.com/edit/typescript-yw8xyp?file=style.css.

What I am trying to achieve is:

  1. When the container gets larger, then the padding of the container should get bigger to a maks padding of 100px.
  2. When the container gets smaller, then the padding of the container should get smaller to minimum padding of 10px.

So when the container hit a specific size - then the padding should change dynamically - increase or decrease dependinding on the container size. I am trying to do this only using CSS - if that is even possible :D

Does someone know how to do this? Thanks in advance :)

Upvotes: 0

Views: 2469

Answers (3)

Torfiks
Torfiks

Reputation: 457

You can achieve adaptive padding, using a variable for the width like this: https://stackblitz.com/edit/typescript-u26fhc?embed=1&file=style.css

For min and max you need media queries

Upvotes: 3

Gayantha
Gayantha

Reputation: 441

Best way is define break points and set paddings accordingly.

Upvotes: 0

abhndv
abhndv

Reputation: 209

i guess you want padding in all 4 sides. use display flex

    .sections-container {
      border: 1px solid black;
      width: 80%;
      height: 400px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }

    .section {
      border: 1px solid black;
      width: 70%;
      height: 100px;
    }

Upvotes: 1

Related Questions