0

I have broadly two aspect ratios (1:1 and 16:9) that according to a page's layout may occupy 4, 8 or 12 columns in a 12 column grid. How do I pass the values set by, say, span(4 of 12) to the same element's hight?

A very similar question has already been asked here. I've tried tweaking it to my needs creating a mixin to calculate the values, but to no avail. It also references to documentation for the fluid-ratio mixin that leads to a 404 page. And the question clearly refers to Susy v1 and I'm using v2. So I'm stumped.

Community
  • 1
  • 1
Seb
  • 723
  • 1
  • 6
  • 11
  • 1
    – jbutler483 Mar 04 '15 at 16:30
  • @jbutler483 I don't follow. – Seb Mar 04 '15 at 17:17
  • You are yet to include any markup in your question, let alone any attempts to show you have tried to sort this out yourself. Look at how the other question has been asked- with a code sample, as well as images to display their point. Please do likewise, as we'll put as much effort into answering as you do with asking – jbutler483 Mar 04 '15 at 17:28
  • I agree, need to add your code but a little trick I use to maintain aspect ration (mostly 16:9) is to add a container wrapping around the element and then use padding-top (16:9 = padding-top: 56.25%) to set my ratio. As long as things are responsive inside the container, you can control the aspect ratio quite nicely. Post your code and if this applies, I post the code fix for you. – Joe Conlin Mar 04 '15 at 18:22
  • Forgive me, I was lazy and thought that maybe there was a simple abstract solution that I hadn't entertained. I will add a bit more as soon as I've explored it further. – Seb Mar 05 '15 at 10:25

1 Answers1

1

Without any code is very hard to understand what are you trying to accomplish and how, but at first sight you wouldn't need a new mixin. You could just simply say:

.element {
    width: span(9 of 12);
    height: span(3 of 12);
}

or 

.element {
    @include span(9 of 12);
    height: span(3 of 12);

}

And be done with it.

yivi
  • 42,438
  • 18
  • 116
  • 138