Basic CSS Styling within Colossus

[Matt Zimmermann]

To accomplish that, I would recommend using the "u-grids-3" utility class [ https://docs.miva.com/readytheme-sha...ies.html#grids ]

[jfazar]

That seems to work, but is it possible to set percentage for them? I'd love to have a two column but have the left side be 25% and the right side 75%.

[Matt Zimmermann]

In that case, use the width utility classes.

[jfazar]

I've never used those before, I don't suppose you can give me a little more info/link? I'd appreciate it.

[Matt Zimmermann]

https://docs.miva.com/readytheme-sha...es.html#widths

[jfazar]

Hey Matt, thanks for the help! I think I have gotten the basics (12 colums, s - m - l -w breakpoints, etc) figured out but when I get to small/mobile the content overlaps. Do you know how I can get it to stack so the image is on top and content right below?

[Matt Zimmermann]

Based on the code you posted above, you could try something like this for each entry:

<div class="u-flex o-layout--column o-layout--row--l">
<h4 class="c-heading-delta"><a href="/cultural-heritage.html">Cultural Heritage</a></h4>
<div>
<a href="/cultural-heritage.html"><img src="graphics/00000001/int_img_industry-culturalHeritage.jpg" alt="Cultural Heritage" width="200" height="200"></a>
<p>Imaging Science Associates' comprehensive suite of products and software are used by cultural heritage institutions worldwide including the world's largest library and the nation's attic in Washington D.C. We have created a simplified method to define, share, and test performance specifications ...<a href="/cultural-heritage.html">Read more</a></p>
</div>
</div>

[jfazar]

I had to modify it slightly but it works great now, thanks Matt!