CSS Unused CSS Stages Flexbox and Multi-Column Layout Multi-Column Layout

Not getting the fixed column width??

Hi all,

I've been playing around with styles on the flexbox module and I am struggling to get the fixed column width..

Here my code, is something over riding it / have i made a rookie error ...?

css
//* this file is named page-styles.css 1st link in head on .html *//

body {
    background-color: steelblue;
}

.main {
    width: 70%;
    height: auto;
    padding: 25px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    background-color: lightgrey;
    border-radius: 15px;
}

Then I have the this.....

css
//*this file is named styles.css 2nd link on .html *//

.main {
    -webkit-column-count: 3;
    -webkit-column-gap: 3em;
    -webkit-column-rule: 2px solid darkblue;
    -webkit-cloumn-width: 250px;
}

Any advice on this one will be much appreciated??

Thanks Craig

Craig,

Have you tried taking out the "width: 70%;" value in your first CSS image, and seeing if the widths stay fixed after that?

That's all this noob can guess. Good luck with it!

-Brent

Unfortunately no joy with that one but thanks for the help

Craig!

2 Answers

Hi Craig,

There is a typo in the code you posted:

-webkit-cloumn-width: 250px;

I'm a noob too, but otherwise, it looks correct to me. :)

Tara

Its painful when something so obvious is pointed out that I had spelt correctly only a few lines above ...

not my greatest moment haha

Thanks Tara!!

No worries, happens to all of us!

Aaron Lafleur
Aaron Lafleur
10,474 Points

I'm not real sure, but I think you may have to specify display: flex; in your container div. Not positive. Been a while since I've messed with CSS.