CODEWITHSUNDEEP
htmlcss
tanjim anim
tanjim anim

Reputation: 531

Media Queries not working properly to change the width

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

Answers (3)

HiddenOne1254
HiddenOne1254

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

Tech Stairways
Tech Stairways

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

Dejan.S
Dejan.S

Reputation: 19158

The device-width properties has been deprecated so use min-width instead. You can read on MDN

so change

  • min-device-width to min-width
  • max-device-width to max-width

@media screen and (min-width: 320px) and (max-width: 630px) {
  .calculator {
    width: 60%;
  }
}

Upvotes: 1

Related Questions