grid="center" tag on small screens

twilliams3 commented 7 years ago

We're having some issues with the column tag inside of a grid=center grid. On smaller screens (breakpoint <480px) the inner column in the code below expands/contracts based on the amount of text inside. With a small amount you get a narrow band instead of a "10" column. With a large amount of text you get the width of the parent grid instead of a "10" column.

Ex. http://codepen.io/onodev/pen/QdYeKE

Ex: using https://cdn.concisecss.com/concise.min.css

<div grid="center" style="min-height:200px;background:#ccc">
  <div column="10" style="min-height:100px;background:#fff">
    shrink
  </div>
</div>

<div grid="center" style="min-height:200px;background:#eee">
  <div column="10" style="min-height:100px;background:#fff">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum vitae mi faucibus consectetur. Nam iaculis turpis magna, eget feugiat metus sodales non. Phasellus vel turpis aliquam, volutpat felis et, lacinia ligula. Cras mi nisi, consequat non magna sed, accumsan gravida elit. Aliquam imperdiet ipsum id ipsum mattis tristique. Cras lobortis erat et egestas tincidunt. Suspendisse iaculis egestas neque eget tincidunt. Aliquam quis rutrum ante. Morbi nec justo vitae ipsum ultricies egestas eu vitae lacus. Praesent eget elementum est. Maecenas venenatis vel nunc nec accumsan. Proin porta sapien eget nisi vestibulum, a placerat nunc auctor. Donec urna tortor, hendrerit quis pulvinar quis, aliquet ultrices nulla. Integer in vestibulum elit. Ut ac ultrices tellus. Suspendisse eu velit eros.
  </div>
</div>

ghost commented 7 years ago

Hi @twilliams3

Indeed, there is a problem in that case. Try adding this in your CSS:

[grid~="center"] {
  flex-direction: row;
}

And the other thing, by default all columns are expanded to 100% when they are below the small breakpoint; that's an intended behavior. But is you want to keep the columns at every size, try adding this to your settings:

$breakpoint: (width > 0px);

Let me know if that works!

twilliams3 commented 7 years ago

Yep, that fixes it! Thanks, the expanded to 100% is actually the behavior we wanted, so that's perfect. Will that fix be integrated into a future version of concise?

ghost commented 7 years ago

Sure! and yeah, I will include it in a new version. I don't have an estimate yet, but at some point will happen 👍

ConciseCSS / concise.css

grid="center" tag on small screens #270