#Calculator

19 messages · Page 1 of 1 (latest)

little solstice
#

The items/numbers aren't going in the center

# 
OP
 — Today at 2:45 PM
 style.css

*, *::before, *::after {
box-sizing: border-box;
font-family: Gotham Rounded, sans-serif;
font-weight: normal;
}

body {
    padding: 0;
    margin: 0;
    background: linear-gradient(to right, #00AAFF, #00FF6C);
}

.calculator-grid {
    display: center;
    justify-content: center;
    align-items: center;
}```
#

The background works, so i know its connected to the HTML.
but the numbers wont go to the middle

inner dome
#

It seems that the .calculator-grid class in the CSS code you've shared is using the display property with the value center instead of flex.

To align the items to the center of the container, you can use the display: flex property on the .calculator-grid class, and then use the justify-content and align-items properties to center the children.

Here's an updated version of your CSS code to do this:

*, *::before, *::after {
  box-sizing: border-box;
  font-family: Gotham Rounded, sans-serif;
  font-weight: normal;
}

body {
  padding: 0;
  margin: 0;
  background: linear-gradient(to right, #00AAFF, #00FF6C);
}

.calculator-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100;
}
little solstice
inner dome
#

What is the problem

#

What does it say

little solstice
inner dome
#

Then please send me the html code

#

Because I think there is a problem in your html

#

Which is hampering you're css

little solstice
# 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Caculator</title>
    <link href="styles.css" rel="stylesheet">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="calculator-grid">
        <div class="output"></div>
        <div class="previos-operand"></div>
        <div class="current-operand"></div>
    </div>
    <button class="span-two">AC</button>
    <button>DEL</button>
    <button>÷</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>*</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>+</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>-</button>
    <button>.</button>
    <button>0</button>
    <button class="span-two">=</button>
</body>
</html>```
#

@inner dome ^

little solstice
#

?

inner dome
#

Give me one day I will finish and correct the code because as I thought you have a problem in your html that is why the css is not working

little solstice
little solstice
#

I finished it and it works fine.