Creating flexible padding for child elements inside a container using CSS

I am facing a challenge in creating dynamic padding within a container.

Consider the following HTML:

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

and the corresponding 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;
}

In the current setup, the padding within the container is fixed at 24px. You can view this in action at the following stackblitz example: https://stackblitz.com/edit/typescript-yw8xyp?file=style.css.

My goal is:

  1. As the container expands, the padding should increase dynamically up to a maximum of 100px.
  2. Conversely, as the container shrinks, the padding should decrease dynamically but not be less than 10px.

Essentially, I am looking to change the padding dynamically based on the container size, using only CSS. Is this achievable?

If you have any insights on how to accomplish this, I would greatly appreciate it. Thank you!

Answer №1

To create adaptable padding, consider using a variable for the width in your CSS like so: https://example.com/styles

If you want to set minimum and maximum values, you'll need to use media queries.

Answer №2

If you're looking to add padding on all four sides, consider using the display flex property.

    .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;
    }

Answer №3

The most effective method is to establish breakpoints and adjust the paddings accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trigger the D3 component to re-render in React after a state change occurs in the parent component

My React project consists of two components written in TypeScript. The first component contains menus, and I am using conditional rendering to display different content based on user selection. <Menu.Item name="graph" active={activeItem ...

Updates to the Tailwind file are not appearing on the page after reopening the file

Every time I reopen the project, the file tailwind properties do not get rebuilt and if I add new properties like text-color, they are also not reflected. Any suggestions on how to solve this issue? I need the project to update and take in new properties ...

Can you tell me the title of this pointer?

When utilizing the drag function in the RC-tree, a specific cursor is displayed. I am interested in using this cursor in another dragzone on my website, but I am uncertain of its name. This same cursor also appears when dragging highlighted text into the b ...

What is the reason why certain variables in req.body can be read by Express.js while others cannot?

Currently, I am not utilizing body-parser and it is clear that I need to incorporate it. My query pertains to the inconsistency in how my variables are being accessed through req.body without body-parser. Some of the variables display undefined values whil ...

Positioning Bootstrap table in the middle of the screen

I need help figuring out how to keep my bootstrap table centered in the middle of the page, instead of adjusting based on the tab selected within a bootstrap nav tab. Currently, it centers around the active tab, but I want it to stay in the middle no matte ...

Utilizing CSS animation triggered by a timer to produce a pulsating heartbeat effect

Here's a unique way to achieve a heartbeat effect on a spinning circle. The goal is to have the circle double in size every second and then shrink back to its original size, resembling a heartbeat. To achieve this, a JavaScript timer is set up to remo ...

Creating Dynamic Column Headings in PHP Using HTML

I have been using the following code to create an HTML table. I tried searching online for information on PHP get column headings, but I could only find information about rows. I was wondering if it is possible to use a while loop to dynamically print the ...

What is the best way to apply a filter to an angular directive for filtering data in an ng-repeat loop?

Having some trouble setting up a directive where I can pass both the data and a specific filter to be used in the ng-repeat. My current approach doesn't seem to be working, so I might need to rethink my strategy. Any suggestions on how I can pass in ...

Vuejs is throwing an error claiming that a property is undefined, even though the

I have created a Vue component that displays server connection data in a simple format: <template> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="page-header"> < ...

Do we really need to use redux reducer cases?

Is it really necessary to have reducers in every case, or can actions and effects (ngrx) handle everything instead? For instance, I only have a load and load-success action in my code. I use the 'load' action just for displaying a loading spinne ...

Adjusting the dimensions of a table

I've been utilizing jQuery datatable and I am facing a challenge where the table width extends beyond the container it should be contained in. I've attempted several solutions to fix this issue: 1. Setting the sWidth option on both the table an ...

Position a div in the center and add color to one side of the space

I am seeking a way to create a centered div with the left side filled with color, as shown in examples. I have devised two solutions without using flexbox, but both seem somewhat like hacks. body { margin: 0; padding: 0; } .header { width: ...

Leverage WooCommerce API in conjunction with Express.js

Here's the code snippet I've been working on: const express = require('express'); const router = express.Router(); const WooCommerceAPI = require('woocommerce-api'); const WooCommerce = new WooCommerceAPI({ ...

Passing array map data to another screen in React Native

Greetings! I successfully created an array map to showcase specific data from my API. Now, I am faced with the challenge of TRANSFERRING THIS DATA TO ANOTHER SCREEN. My current dilemma lies in the fact that the displayed data is generated using ARRAY MAP, ...

What is the best way to eliminate the border of an expansion panel in Material-UI?

Is there a way to eliminate the border surrounding the expansion panel in Material-UI? ...

Is it necessary to encode special characters in a JSON object?

I am currently working on a code where I am taking a class and converting it to JSON format. Throughout my testing, all the content is surrounded by double quotes, for example: { "a" : "hello world ! '' this is john's desk" } I am wonderi ...

How can I access data from an EDN file in ClojureScript while using NodeJS?

Looking for guidance on reading a basic data file in EDN format within a ClojureScript cli app running on NodeJS. Unfortunately, core Clojure libraries like core.java.io/read and clojure.edn/read are not accessible. Any recommendations on alternative metho ...

Is it possible to utilize the System.import or import() function for any JavaScript file, or is it restricted to single module-specific files?

After reading an intriguing article about the concept of dynamic component loading: I am interested in learning more about the use of System.import. The author demonstrates a specific syntax for loading the JavaScript file of the module that needs to be d ...

Broken CSS dropdown menu issue

Recently, I encountered an issue with a hoverable drop-down menu that has been functioning smoothly for years. After adding a new sub link, the code broke. Here is the code for the menu: #divMenu, ul, li, li li { margin: 0; padding: 0; } #divMenu { ...

Sequelize encountered an error: getaddrinfo ENOTFOUND (even though the address is correct)

I've encountered some Sequelize errors while attempting to deploy a site I developed using Angular and Express/Sequelize. Here's the issue: Everything works perfectly on my local WAMP server, connecting to the local database without any problems ...