columns behaviour

[clieee]

hi,

when writing markup such as this;

<div class="container">
<div class="row clear">
<div class="col col-6 tablet-col-6 mobile-col-1-2">
<span>lorem ipsum</span>
</div>
</div>
</div>

it seems to only work with the tablet-layout (=filling out 12 columns width), but not for mobile or desktop. is there some kind of new way to do this, or am I missing something?

[matthewhartman]

Hey There,

I'm not really sure what the problem is in the above scenario, but it works Ok for me.

The above example you have written will give a half column for desktop, tablet and mobile.

Please let me know if I can assist you further.

Cheers,

Matt

[clieee]

Hi,

Sorry - I thought I got all the code in there, however - I took the following from the documents-page,

<div class="row clear" style="outline: 1px solid blue;">
  <div class="col col-6 tablet-col-6 mobile-col-1-2" style="outline: 1px solid red;">
    <span class="no-tablet no-mobile">6</span>
    <span class="no-desktop show-tablet no-mobile">6</span>
    <span class="no-desktop no-tablet show-mobile">1-2</span>
  </div>
  <div class="col col-6 tablet-col-6 mobile-col-1-2" style="outline: 1px solid red;">
    <span class="no-tablet no-mobile">6</span>
    <span class="no-desktop show-tablet no-mobile">6</span>
    <span class="no-desktop no-tablet show-mobile">1-2</span>
  </div>
</div>

and that should then give me: 2 columns for mobile, 2 columns for tablet, and 2 columns for desktop, all 50% width each, right (if I look at the grid demo)?
But only time it renders like that is within the tablet-breakpoint. For mobile & desktop breakpoints I get 2 columns, but not the "50%" width for each column. Then I saw it was a new version out, which didn't match the documentation, and I got it to work with the following;

<div class="row clear" style="outline: 1px solid blue;">
    <div class="col col-1-2 tablet-col-6 desktop-col-6" style="outline: 1px solid red;">
        <span>Col 1</span>
    </div>
    <div class="col col-1-2 tablet-col-6 desktop-col-6" style="outline: 1px solid red;">
        <span>Col 2</span>
    </div>
</div>

But if I changed "col-1-2" to "col-full", the tablet & desktop stopped working as expected(?), they didn't get back to their floating behaviour. So I added;

.col{
  float: left;
}

within "_desktop-grid.scss" and "_tablet-grid.scss" which seemed to solve the issue. Can this be the case, or am I doing something wrong here? :)

[matthewhartman]

Hey,

I think you're referring to when I made the mobile-first base updates (v1.9.0+) which I deleted and rolled back to v1.8.2.

The latest Base code (v1.8.2) will be up to date with the documentation.

So, in order to achieve what you are after, your code will look like this:

<div class="row clear" style="outline: 1px solid blue;">
    <div class="col col-6 col-1-2 tablet-col-6 mobile-full" style="outline: 1px solid red;">
        <span>Col 1</span>
    </div>
    <div class="col col-6 col-1-2 tablet-col-6 mobile-full" style="outline: 1px solid red;">
        <span>Col 2</span>
    </div>
</div>

---

So just to clarify, Base 2.0 will be mobile first :)

Will be coming in the next couple of months.

Thanks

Matthew