<p>Turns out I was trying to add this to my :hover state and not the initial state. Problem solved by adding a new rule and putting the width in there.</p>

CC BY-SA 3.0
2014-09-12T16:36:39.700Z
2014-09-12T16:36:39.700Z
Stuart McCoy
<p>I'm using CSS calc to help make my links the proper width and still account for the margins that separate them. The number of links here will vary between 3 and 5 and I wanted to not have to update my CSS when this changes. The code below works except the code is written after CSS is run and therefore doesn't set the width for the links as I'd want. Is there a way to get this to work using Craft or is this a problem with the way calc works?</p>

<pre><code>{% set contactLinkCSS %}
    {% for block in contactLinks.contactLinks.type("contactLink") %}
        {% set count = 100 / loop.length %}
        .{{ block.contactLinkName | slugify }}:hover {
            width:calc({{ count }}% - 0.625rem);
            background-color: {{ block.contactLinkColor }}
        }
    {% endfor %}
{% endset %}
</code></pre>

CC BY-SA 3.0
2014-09-12T15:57:28.463Z
What the output of the code being generated?
Brad Bell
CC BY-SA 3.0
2014-09-12T16:28:39.120Z
I found my problem. I was trying to place the width on :hover and not the initial state of the link. doh!!!
Stuart McCoy
<loop><css>
trying to use loop.length with some dynamic css
# trying to use loop.length with some dynamic css

(Asked by: username_0 on 2014-09-12)

I'm using CSS calc to help make my links the proper width and still account for the margins that separate them. The number of links here will vary between 3 and 5 and I wanted to not have to update my CSS when this changes. The code below works except the code is written after CSS is run and therefore doesn't set the width for the links as I'd want. Is there a way to get this to work using Craft or is this a problem with the way calc works?
{% set contactLinkCSS %}
    {% for block in contactLinks.contactLinks.type("contactLink") %}
        {% set count = 100 / loop.length %}
        .{{ block.contactLinkName | slugify }}:hover {
            width:calc({{ count }}% - 0.625rem);
            background-color: {{ block.contactLinkColor }}
        }
    {% endfor %}
{% endset %}

**Tags:** loop, css

> **Comments:**
> **username_1**: What the output of the code being generated?  
> **username_0**: I found my problem. I was trying to place the width on :hover and not the initial state of the link. doh!!!  

---

## 1 answers

### Answer by username_0 on 2014-09-12. Score: 1

Turns out I was trying to add this to my :hover state and not the initial state. Problem solved by adding a new rule and putting the width in there.


---

