Help with my calculator challenge

Question

The code works fine on my laptop but it doesn’t display properly on my cellphone. I try to add @media screen but it seems to not work at all. Any help will be appreciated. Thank you
https://code.sololearn.com/Wo9pepBk4H7c/?ref=app

Answer 1

Apart from @media
A second way to maintain the responsiveness of your calculator is by using relative unit. Instead of pixel, there are % and, vw, vh, vmax and vmin

Demo :
https://code.sololearn.com/WPcs5U214LN6/?ref=app

Explanation :
vw is view width
vh is view height
vmax is max(vw, vh)
vmin is min(vw, vh)

Answer 2

Welcome, Abdul.

Part one: play with the new units:

1. Try to understand vw and vh by rotating mobile screen from portrait to landscape, and see what happens.

2. Try to change vw and vh to vmax, rotate screen and see.
Then do same for vmin.

Part two:

(do in future)

While relative units is a quick diagnosis, @media is more powerful way to solve more complicated problem instead of just resizing some element, take for example,

https://code.sololearn.com/W02pmd87hzEz/?ref=app

You can actually change position and shapes of the elements.

One of the common application is repositioning navigation bar based on mobile view / computer view.

Later when you are one a more complicated project, check some learning material about @media 😉

Answer 3

Because you hadn't specify what to do when the screen is of mobile size.

Add
@media only screen and (max-width: 400px)

Demo :
https://code.sololearn.com/Wz3D5iVVVfWc/?ref=app

Explanation :
max-width: 400px means
if width < 400px

Answer 4

Gordon that’s much better, I have never learned about this. I saw it in the christmas tree code but had no idea what they were. thank you so much; you taught me a really good thing and thanks for the help

Answer 5

thanks again
I will look on that