Revision history [back]

The process for having padding begin at its maximum value while in full screen mode but gradually decreasing to its minimum value when the browser width decreases would involve using media queries and CSS transitions.

1. Set the maximum value of the padding for the container element when in full screen mode.

.container {
  padding: 100px;
}

1. Use a media query to target smaller screen sizes and reduce the amount of padding.

@media (max-width: 768px) {
  .container {
    padding: 50px;
  }
}

1. To create a gradual transition between the maximum and minimum padding values, add a CSS transition property to the container element.

.container {
  padding: 100px;
  transition: padding 0.5s ease;
}

1. As the browser width decreases, the padding value will gradually reduce to its minimum value over the course of the transition period.

@media (max-width: 768px) {
  .container {
    padding: 50px;
  }
}