CSS calc and media query

Developer Support CMS Development
1

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

2

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

3

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!

4

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!