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 %}
  • What the output of the code being generated?
    – Brad Bell
    Commented Sep 12, 2014 at 15:57
  • I found my problem. I was trying to place the width on :hover and not the initial state of the link. doh!!! Commented Sep 12, 2014 at 16:28

1 Answer 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.