Html - CSS: How can I size an object relative to its parent object

anonymous
October 26, 2024
51 views
0 votes
2 Answers

I am creating a calculator using raw html, css and js and am in the process of designing the calculator itself. However, I am having the issue of sizing the buttons in a way that they remain responsive and are sized relative to their container ‘row’.

What is the most efficient way to size the buttons so that they are even, fit the containers and ensure they remain in their respective containers?
Thank You!

* {
    border: 1px solid black;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 88vh;
}

.calculator {
    padding: 3vh;
    height: 50vh;
    width: 40vh;
    display: flex;
    flex-direction: column;

}

.display {
    flex: 1;
}

.buttons {
    flex: 6;
    display: flex;
    flex-direction: column;
    
}

.row {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
}

.num{
    margin: 1vh;
    position: relative;
    padding: 10%;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Calculator</title>
        <link rel="stylesheet" href="calculator.css">
    </head>
    <body>
        <h1>Calculator</h1>
        <div class="container">
            <div class="calculator">
                <div class="display">1 + 1</div>
                <div class="buttons">
                    <div class="row row1">
                        <button class="num">7</button>
                        <button class="num">8</button>
                        <button class="num">9</button>
                        <button class="num op sub">-</button>
                        <button class="num op div">÷</button>
                    </div>
    
                    <div class="row row2">
                        <button class="num">4</button>
                        <button class="num">5</button>
                        <button class="num">6</button>
                        <button class="num op add">+</button>
                        <button class="num op mul">×</button>
                    </div>
    
                    <div class="row row3">
                        <button class="num">1</button>
                        <button class="num">2</button>
                        <button class="num">3</button>
                        <button class="num clr">CLR</button>
                        <button class="num op eq">=</button>
                    </div>
    
                    <div class="row row4">
                        <button class="num">0</button>
                        <button class="num">00</button>
                    </div>
                </div>
            </div>
        </div>
        
        <script src="calculator.js"></script>
    </body>
</html>

Answers

Here is the code, don’t use border as a *

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 88vh;

}

.calculator {
    padding: 3vh;
    height: 50vh;
    width: 20vw;
    display: flex;
    flex-direction: column;
    border: 1px solid #000;
}

.display {
    flex: 1;
    border: 1px solid #000;
}

.buttons {
    flex: 6;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 1px solid #000;
}

.row {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    margin-top: 10px;
}

.num {
    width: 18%; /* Set a width to control button size */
    height: 100%; /* Make buttons fill the row height */
    padding: 10px; /* Add some padding for better touch */
    font-size: 1.5em; /* Increase font size for readability */
}

   <h1>Calculator</h1>
        <div class="container">
            <div class="calculator">
                <div class="display">1 + 1</div>
                <div class="buttons">
                    <div class="row row1">
                        <button class="num">7</button>
                        <button class="num">8</button>
                        <button class="num">9</button>
                        <button class="num op sub">-</button>
                        <button class="num op div">÷</button>
                    </div>
    
                    <div class="row row2">
                        <button class="num">4</button>
                        <button class="num">5</button>
                        <button class="num">6</button>
                        <button class="num op add">+</button>
                        <button class="num op mul">×</button>
                    </div>
    
                    <div class="row row3">
                        <button class="num">1</button>
                        <button class="num">2</button>
                        <button class="num">3</button>
                        <button class="num clr">CLR</button>
                        <button class="num op eq">=</button>
                    </div>
    
                    <div class="row row4">
                        <button class="num">0</button>
                        <button class="num">00</button>
                    </div>
                </div>
            </div>
        </div>

Combining grid and flex,you can have the job done automatically.

Note:

Use min-width instead of fixed width/height unless no choice
You might want to use a text input for the display instead of a div, for accessibility but also in case you’ll add interactivity with Javascript.
If needed, you might use aspect-ratio: 1 / 1; on .num classe to keep a square shape

* {
    border: 1px solid black;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 88vh;
}

.calculator {
    padding: 3vh;
    /* min-width & min-height instead of fixed lengths */
    /* But you could probaly delete those line in your case */
    min-height: 50vh;
    min-width: 40vh;
    display: flex;
    flex-direction: column;

}

.display {
    padding: 6px;
    flex: 1;
    display: grid;
    place-content: center;
}

.buttons {
    display: grid;
    row-gap: 6px; /* Vertical gap */
}

.row {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columns of same size */
    column-gap: 6px; /* Horizontal gap */
}

.num{
    padding: 6px;
}

/*
 * Optional
 * Each child in the row4 will take half of row's width
 */
.row4 {
    grid-template-columns: repeat(2, 1fr);
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Calculator</title>
        <link rel="stylesheet" href="calculator.css">
    </head>
    <body>
        <h1>Calculator</h1>
        <div class="container">
            <div class="calculator">
                <div class="display">1 + 1</div>
                <div class="buttons">
                    <div class="row row1">
                        <button class="num">7</button>
                        <button class="num">8</button>
                        <button class="num">9</button>
                        <button class="num op sub">-</button>
                        <button class="num op div">÷</button>
                    </div>
    
                    <div class="row row2">
                        <button class="num">4</button>
                        <button class="num">5</button>
                        <button class="num">6</button>
                        <button class="num op add">+</button>
                        <button class="num op mul">×</button>
                    </div>
    
                    <div class="row row3">
                        <button class="num">1</button>
                        <button class="num">2</button>
                        <button class="num">3</button>
                        <button class="num clr">CLR</button>
                        <button class="num op eq">=</button>
                    </div>
    
                    <div class="row row4">
                        <button class="num">0</button>
                        <button class="num">00</button>
                    </div>
                </div>
            </div>
        </div>
        
        <script src="calculator.js"></script>
    </body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – CSS: How can I size an object relative to its parent object

Answers