Reputation: 531
I am making this JS calculator project, which I want to make responsive. But it's not quite working properly.
I want to make the width of the .calculator slightly bigger when the screen becomes smaller because in the that way all the buttons can be shown properly(especially the operator ones).
Here is the codepen I have worked on:https://codepen.io/tanjimanim/pen/jOwoYrV?editors=0110
and the media query I have written.
@media screen and (min-device-width: 320px) and (max-device-width: 630px) {
.calculator {
width: 60%;
}
}
Upvotes: 0
Views: 1358
Reputation: 146
the min-width
works if range is outside that specified px
value and max-width
works for that specified range.
I think it is because you are setting width:60%
for both device size.
and you are using max-width:45px
property on .calculator
class so need to change that property in media query and if you want width of your calculator to fit the width of the display size you can remove that property of max-width
.
You should try:
works when size of display is in range of 320px and change width according to your need
@media screen and (max-width: 320px){
.calculator {
max-width: 60%;
}
}
works when size of display is greater than of 320px and change width according to your need
@media screen and(max-width: 320px) {
.calculator {
max-width: 60%;
}
}
Upvotes: 1
Reputation: 37
Use this code section in your CSS:
@media screen and (min-width: 320px) and (max-width: 630px) {
.calculator {
width: 60%;
}
button
{
padding:16px 0px;
}
}
device-width
has been deprecated.
And to show all the operator buttons
on all mobile device remove padding left and right from selector button
.
Have a look in this screenshot
Upvotes: 3