Calculator App - CSS help needed(Margin and Padding)

1

Hi Everyone,

I am currently having two problems with the Calculator app. If resolved, this would be a great learning experience.

  1. I am not sure why there is more space present to the right of the buttons inside the calculator. Maximizing the output screen makes it work in the opposite direction where the right side margin decreases and all the other three margins increase. The idea is to center the display and buttons and leave equal space around it.

  2. The top and the bottom most button rows(“C” row and “0” row) do not quite align with the button rows in between. I am trying to make this app responsive. Any tips would be greatly appreciated!

Thanks,
Anirudh

1 Like
2

The fact that some buttons contain the same amount of characters, doesn’t mean that they all have the same width. If you look closely you’ll see that although most of your buttons only contain a single character, the non numeric ones have slightly different widths, thus making the whole thing not align properly. Try adding a fixed width to your .buttons > span elements and see how it works out :wink:

May I suggest reading about flexbox as it simplifies layout creation significantly.
Here are some sources
MDN - Flexbox
CSS Tricks - A Complete Guide to Flexbox

3

That is some really useful information about flexbox there. Thanks for sharing the articles! I have started implementing flexbox in the calculator app after giving it a thorough read. I have tried limiting the max-width but still with no luck.

4

That’s because some of your elements are smaller than the max-width you set. Set a width so that every element has the same.

I am glad you liked flexbox, it’s pretty powerful once you get the grasp of it :wink: I’d suggest you try playing with it in a separate project, just to discover what it has to offer.