0

On a website, I have a changing number of buttons (<li>), which I need to resize if they don't fit in a row on mobile devices. Mobile devices have different widths and (as stated before) the number of buttons may vary.

I already have the number of buttons as style parameter in the parent (<ul>) element: style="--buttonCount: 6;" for example. Formatting the buttons now is pretty easy using var() inside calc() in CSS: margin: 0 calc((((100vw - 8px) - (var(--buttonCount) * 40px)) / (var(--buttonCount) - 1))) 0 0; This shows up to be no problem at all, tested in Vivaldi (Chrome) and Firefox on Windows 10.

But this uses and leaves 40px as the button width, which may be too much on smaller screens (10 * 40px = 400px, my Huawei has 360px width). And so I tried to use a Media Query which respects the number of buttons. Using calc() inside a media query isn't a problem, it works very well, but just with fixed numbers: @media (max-width: calc((6 * 40px) + ((6 - 1) * 2px))) {} But I need it to automatically respect the real number of buttons, which I have in the var(--buttonCount). Changing the Media Query to @media (max-width: calc((var(--buttonCount) * 40px) + ((var(--buttonCount) - 1) * 2px))) {} makes it non functional though.

Am I missing something or doing anything wrong here? Can this be done anyway without using JS?

Thanks in advance!

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Spider IT
  • 73
  • 1
  • 10
  • Does this answer your question? [Dynamic Media Queries](https://stackoverflow.com/questions/16080961/dynamic-media-queries) – Youssouf Oumar Jun 21 '22 at 10:53
  • Unfortunately: no. The answers there use JS, which I would like not to use. – Spider IT Jun 21 '22 at 11:21
  • Can you provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example), please? – Anton Jun 21 '22 at 12:01
  • This one doesn't work: https://codepen.io/XM624/pen/OJQYoxK This one works as stated in the question: https://codepen.io/XM624/pen/rNJgqNd Open your browser's Developer Tools, switch to Mobile view, set the width to 240px for example. The first codepen then shows the buttons overlapping while the second codepen shows them smaller with space. In the second one, the number of buttons is hard-coded in the Media Query. – Spider IT Jun 21 '22 at 12:41
  • I just found this answer to a similar question: https://stackoverflow.com/a/47212942/3845953 and will do some investigation on env(). – Spider IT Jun 21 '22 at 13:40

1 Answers1

0

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

Spider IT
  • 73
  • 1
  • 10