Calc() Not Working Within Media Queries

h1 {  font-size: 12px;  background: green;  color: white;}
$bp-xl: 1024px;
@media (min-width: $bp-xl + 6) {   h1 {    font-size: 50px;    background: pink;    color: black;  }} /* MIN-WIDTH = 1030px */

<h1>HELLO</h1>

CSS: How to use var() inside calc() inside @media

Conclusions of my investigations:

• var() can NOT be used inside a Media Query as it is bound to an element (usually :root)
• env() CAN be used in Media Queries, but up to now there is no way to attach own constants to it
• For what I wanted to achieve, there was another solution using min() to avoid another Media Query

Using min() I was able to avoid the Media Queries. My problem was, that I wanted the buttons to be 40px by 40px, except when the device width wasn't enough to show them all in one line. min() returns the smallest of 2 values, which - in my case - is the smallest of the calculated possible width and 40px. This way the size is restricted to 40px. Using min() in calculating the right margin as well correctly calculates the space in between of the buttons too.

https://codepen.io/XM624/pen/GRQVWJx

Media Queries not working properly to change the width

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%;
  }
}

---

Related Topics