JS Calculator Alignment Issues

#1

I’m struggling a bit to align my buttons properly
Any suggestions are appreciated

#2

In your CSS, try changing:

a{
  margin: 10px;
  width: 2.6vw;
  height: 2.6vw;
}

to

a{
  margin: 10px;
  width: 2.6em;
  height: 2.6em;
}
#3

no change from view width to em

#4

Widen and shrink the width of your browser and you will notice a big difference between the two unit types. I know it does not solve the issue with the 1, 2, 3 lining up with the = sign or the bottom 0 and . anchors, but those are separate issues.

#5

Yes I see
But it is the 123, =
and 0, . alignment that I’m having trouble with

#6

I suggest reading about Bootstrap 3’s Grid System to accomplish what you want without having to create a lot of custom CSS.

#7

Thanks I’ll give it a try

#8

To get the 1 2 3 = and 0 . to line up correctly, check out the section on Nesting columns.

#9

I gave it a good read but somehow it’s not clicking in for me
I looked over the code in the sample and it appears that it is somehow doable without getting into column structures?
I’ll put some more hours into it until I figure out a work around…unless someone has more suggestions?

#10