questions

Calculator column gap not changing even with css tool grid-column-gap

Rate this post

I’m making a calculator on my wordpress website. I found this tutorial that makes a code for a calculator online but when I did it for some reason there is a weird spacing between the grid columns of the “buttons”. I tried assigning grid-row-column to 0px but that didn’t work. When I change the button sizes the column spacing doesn’t change, so I’m assuming that there is something that is making it fixed but I don’t know what it is exactly.

 

        .page-id-100 /*this is the page's id */
        {
            margin: 0;
            padding: 0;
            box sizing: border-box;
            font-family: 'Poppings', sans-serif;
        }

        .calculator 
        {
            grid-row-gap: 0px;
            position: relative;
            display: grid;
        }

        .calculator .value
        {
            grid-column: span 4;
            height: 100px;
            text-align: right;
            border: none;
            outline: none;
            padding: 10px;
            font-size: 18px;
        }

        .calculator span
        {
            display: grid;
            width: 60px;
            height: 60px;
            color: #fff;
            background: #0c2835;
            place-items: center;
            border: 1px solid rgba(0, 0, 0, 0.1);
        }

        .calculator span:active
        {
            background: #74ff3b;
            color: #111;
        }

        .calculator .clear
        {
            grid-column: span 2;
            width: 120px;
            background: #ff3077
        }

        .calculator .plus
        {
            grid-row: span 2;
            height: 120px;
        }

        .calculator .equal
        {
            background: #03b1ff;
        }
<form class="calculator" name="calc"><input class="value" type="text" name="txt" /> 
<span class="num clear" onclick="document.calc.txt.value =''">c</span> 
<span class="num" onclick="document.calc.txt.value += '/'">/</span> 
<span class="num" onclick="document.calc.txt.value += '*'">*</span> 
<span class="num" onclick="document.calc.txt.value += '7'">7</span> 
<span class="num" onclick="document.calc.txt.value += '8'">8</span> 
<span class="num" onclick="document.calc.txt.value += '9'">9</span> 
<span class="num" onclick="document.calc.txt.value += '-'">-</span> 
<span class="num" onclick="document.calc.txt.value += '4'">4</span> 
<span class="num" onclick="document.calc.txt.value += '5'">5</span> 
<span class="num" onclick="document.calc.txt.value += '6'">6</span> 
<span class="num plus" onclick="document.calc.txt.value += '+'">+</span> 
<span class="num" onclick="document.calc.txt.value += '3'">3</span> 
<span class="num" onclick="document.calc.txt.value += '2'">2</span> 
<span class="num" onclick="document.calc.txt.value += '1'">1</span> 
<span class="num" onclick="document.calc.txt.value += '0'">0</span> 
<span class="num" onclick="document.calc.txt.value += '00'">00</span> 
<span class="num" onclick="document.calc.txt.value += '.'">.</span> 
<span class="num equal" onclick="document.calc.txt.value = eval(calc.txt.value)">=</span>
</form>

✔️Solution:

This is because you are not defining the width of the original calculator class. This is evident by commenting out the width from the .calculator span class.
To fix this, just add width in the calculator class. a width of 100px worked for me

.calculator 
        {
            width: 100px;
            grid-row-gap: 0px;
            position: relative;
            display: grid;
        }

Leave a Reply

Your email address will not be published.

Back to top button