1

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 %}
2
  • What the output of the code being generated?
    – Brad Bell
    Sep 12 '14 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!!! Sep 12 '14 at 16:28
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, privacy policy and cookie policy

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