title: How do I use HTML classes to set Shopify section sizes through CSS?
body: <p>I'm using Shopify for the first time, which is built on a pretty bewildering combination of different technologies, but I'm fairly certain my actual issue comes down to simple CSS.</p>
  
  <p>In the Shopify theme I'm using, <em>Motion</em> by Archetype, the 'fading images' block-type has a minimum height of '250' (actually 250px * 0.65 for some reason). It has a set of hundred-step sizes: 250, 350, 450, etc.</p>
  
  <p>These sizes are, bizarrely, very hardcoded. The controls are defined thus:</p>
  
  <pre><code>{
      "type": "range",
      "id": "section_height",
      "label": "Section height",
      "default": 650,
      "min": 250,
      "max": 750,
      "step": 100,
      "unit": "px"
    }
  </code></pre>
  
  <p>and these discrete steps are turned into HTML class names, for some weird reason:</p>
  
  <pre><code>&lt;div class="fading-images fading-images--{{ section.id }} fading-images--{{ section.settings.section_height }} fading-images-overlay__overlay loading"&gt;
  </code></pre>
  
  <p>Finally, there are a set of static, hardcoded options in the theme's scss:</p>
  
  <pre><code>.fading-images--250 {
    height: floor(250px * 0.65);
  }
  
  .fading-images--350 {
    height: floor(350px * 0.65);
  }
  
  //etc
  </code></pre>
  
  <p>Now, to me this seems restrictive and bizarre. I would like to dynamically set the height to wherever on the slider I damn well please. If I want a div exactly 456px tall, I see no reason why that should be an issue.</p>
  
  <p>To this end, I have added this line to the  section built into the block-type definition, and replaced the size-based classing with a generic one-size-fits-all:</p>
  
  <pre><code>&lt;style&gt;
    .fading-images--{{ section.id }} .fading-images__sizer {
      height: {{ section.settings.section_height | times: 0.65 | floor}}px;
    }
    .fading-images--{{ section.id }} .fading-images-overlay__title {
      font-size: {{ section.settings.title_size | times: 0.5 }}px;
    }
    // ...
  &lt;/style&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;div class="fading-images fading-images--{{ section.id }} fading-images__sizer fading-images-overlay__overlay loading"&gt;
  </code></pre>
  
  <p>I am certain the Liquid Ruby bits are working correctly, and that the relevant statement is being resolved properly (eg. "height: 296px;"), but the div isn't actually being sized correctly. Inspecting the div in Chrome's dev tools shows that it has the 'fading-images__sizer' class, but the height attribute just doesn't seem to get changed.</p>
  
  <p>I'm fairly certain this must be some small and stupid problem, but I'm damned if I understand what it is. It's particularly puzzling since very similar statements execute perfectly with the exact same setup - note the font-size statement I included, which works perfectly.</p>
  
  <p>Any help would be greatly appreciated!</p>