CSS calc and media query

[Oloph]

Hello community!

I'm trying to build a reponsive module with dynamic container widths using width: calc(). It works fine inline calling  the loop.length function.

  {% for item in module.highlight_box %}
    <div class="highlight" style="width: calc(90%/{{ loop.length }})">

However, I'd like it to kick in only in desktop mode, with a media query. 

The problem is

• Media query won't render the calc() expression
• I can´t access loop.length in the module css. 

Ideas on how to solve this is much appreciated!

Best regards/Selftaught noob

[Oloph · Accepted solution]

Hi again

It turns out this was all easily achieved with flexbox. No need to involve loop length to set column width. 

Sorry about the trouble!

[stefen]

@Oloph you can use the {% require_css %} tag inside the HTML area if you have to have HubL in your styles.

[Oloph]

Thanks Stefen

Wouldn't that be just moving the styling from inline to the head, or what am I missing?

Is there a Hubl function to get the screen size? That way I coud put it in a {% if [screensize > x ] %} sort of statement. 

Thanks!