More examples or documentation on how to use Width

[kitdang]

Are there more documentation on how to work with Width ?

For the below, I understand it's two column but what does the 6 in u-width-6 do? Also, what is w in u-width-7--w?


<div class="o-layout"> <div class="o-layout__item u-width-6"> </div> <div class="o-layout__item u-width-6"> </div> </div>

[Matt Zimmermann]

The number associated with "u-width-" dictates how many columns you would like the element to take up. You can control them via breakpoints by adding a display width modifier.

https://docs.miva.com/readytheme-sha...ilities-widths

[kitdang]

Hi Matt,

Sorry but probably need more context as the example on the link doesn't align with your last post. The number in the example show 6. So per your last post, it should create 6 columns? The result from the example said 2 column though.

[Matt Zimmermann]

In the case of "u-width-6" it will take up half of the available space, i.e. 6 out of 12 columns. If you had two elements both with the "u-width-5" class applied, they would each take up half the space and appear side-by-side. If you used "u-width-2" this would take up 1/6th the available space or 2 out of 12 columns.