0

I'm stumped trying to combine a few things:

  1. I'd like two columns to fill 100% of the width of the browser with a height relative to this width.
  2. I'd like this to switch to one column when the viewport is small.
  3. And (this may be impossible) I'd like the font size to respond to the column width, rather than the viewport - so that when there's only room for one column the font size is larger than it would be if it were split over two columns.

I've patched together this: http://jsfiddle.net/k5x7L682/ - but the code to preserve the ratio creates extra space at the foot. CSS below:

#column {
background-color: grey;
-moz-column-width: 20em;
-webkit-column-width: 20em;
column-width: 20em;
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
column-gap: 2em;
-moz-column-fill: balance;
-webkit-column-fill: balance;
column-fill: balance;
display: inline-block;
position: relative;
}
#column:after {
padding-top: 80%;
display: block;
content: '';
}
p {
font-size: 2.2vw;
}

Thanks for your time reading this...

Suresure
  • 143
  • 11

2 Answers2

2

to turn into 1 column instead two, you should use only column-count and drop column-width.

mediaquerie will do the job for the font-size:

http://jsfiddle.net/k5x7L682/2/ > versus chrome too http://jsfiddle.net/k5x7L682/4/

#column {
  background-color: grey;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -moz-column-gap: 2em;
  -webkit-column-gap: 2em;
  column-gap: 2em;
  -moz-column-fill: balance;
  -webkit-column-fill: balance;
  column-fill: balance;
  display: inline-block;
  position: relative;
}
p {
  font-size: 2.2vw;
}
#column p:first-child {
  margin-top: 0px;
}
@media (max-width: 35em) {
  #column {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
  #column p {
    font-size: 1.5em;
  }
}
<div id="column">
  <p>Lorem ipsum dolor sit amet, tempor phasellus. Integer sodales nonummy in mi augue, aliquet sem posuere nonummy per, ut sed eu mollis rutrum in. Donec enim posuere eget quam sed, urna luctus porta placerat amet interdum, porttitor metus condimentum nec,
    venenatis quis gravida in et eleifend tempor, at suscipit amet libero porta. Viverra adipiscing, egestas velit sit. Sollicitudin morbi non natoque egestas pede. Senectus sed, rhoncus vestibulum massa in, gravida suspendisse nulla, tempor a nec ultricies,
    pharetra ornare vel sed magna varius ante. Convallis tincidunt urna euismod fringilla, autem nulla quis vivamus aliquam. Sem ipsum arcu congue scelerisque ipsum tincidunt. Scelerisque bibendum, cum congue, scelerisque ut in morbi. Ut ornare blandit
    quis vitae mauris. Quis morbi pellentesque praesent mauris id imperdiet, metus gravida amet orci aliquam, nulla et adipiscing eu sit libero. Eget nulla ea, sagittis hendrerit cupidatat in turpis, suspendisse tellus fusce ligula nulla tincidunt quis,
    deserunt ut dictum est vestibulum aenean. Nec phasellus rerum tempus nulla, odio sequi vitae orci justo fermentum. Justo ipsum. Donec aliquam eleifend cras nec dapibus, pharetra leo, sem eu, amet pharetra aliquam felis morbi. Lorem ipsum dolor sit
    amet, tempor phasellus. Integer sodales nonummy in mi augue, aliquet sem posuere nonummy per, ut sed eu mollis rutrum in. Donec enim posuere eget quam sed, urna luctus porta placerat amet interdum, porttitor metus condimentum nec, venenatis quis gravida
    in et eleifend tempor, at suscipit amet libero porta. Viverra adipiscing, egestas velit sit. Sollicitudin morbi non natoque egestas pede. Senectus sed, rhoncus vestibulum massa in, gravida suspendisse nulla, tempor a nec ultricies, pharetra ornare
    vel sed magna varius ante. Convallis tincidunt urna euismod fringilla, autem nulla quis vivamus aliquam. Sem ipsum arcu congue scelerisque ipsum tincidunt. Scelerisque bibendum, cum congue, scelerisque ut in morbi. Ut ornare blandit quis vitae mauris.
    Quis morbi pellentesque praesent mauris id imperdiet, metus gravida amet orci aliquam, nulla et adipiscing eu sit libero. Eget nulla ea, sagittis hendrerit cupidatat in turpis, suspendisse tellus fusce ligula nulla tincidunt quis, deserunt ut dictum
    est vestibulum aenean. Nec phasellus rerum tempus nulla, odio sequi vitae orci justo fermentum. Justo ipsum. Donec aliquam eleifend cras nec dapibus, pharetra leo, sem eu, amet pharetra aliquam felis morbi.</p>
</div>

You may give a max-width:40em or so to the #column container to avoid it to grow too much if the idea was to have 2 cols of max-width each 20em. (not too sure about what you wanted here sincs vw units where used.)

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • Thanks! I was just away arriving at about the same thing myself [http://jsfiddle.net/5shunmma/](http://jsfiddle.net/5shunmma/)! The final problem is how to keep this all in a container with a fixed ratio - without the excess space at the foot both our solutions have. Do you have any ideas? – Suresure Dec 05 '15 at 15:50
  • 1
    @Suresure ? What do you mean by fixed ratio ? media or windows can be any height or width . column-fill: balance; should do the job for the bottom space, at least FF/chrome/IE do. Wich browser are you using, or what structure are you testing. – G-Cyrillus Dec 05 '15 at 20:49
  • Thanks @GCyrillus - I'd like the height of the columns to be relative to the width of the browser window (like here: [http://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio](http://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio)). When I try wrapping the columns in a responsive div, the column height seems unchanged and there's blank space added underneath: [http://jsfiddle.net/od4aLu14/](http://jsfiddle.net/od4aLu14/). Are you seeing the same? – Suresure Dec 05 '15 at 21:57
  • 1
    @Suresure (was away sleeping then work) i just realized what you tried to do with the :after element. ... it is not a good idea for many reasons. first why #column needs to be in absolute Position ? , then how do you manage font-family, font-size and line-height , letter-spacing, online translator and what about if user set these different (user sheets overiding yours) or if the font you used is not avalaible. If you really need this absolute positionning, then used a box with a fixed ratio and allow it to scroll to avoid the whole thing breaking ;) ... just my opinion – G-Cyrillus Dec 06 '15 at 13:09
  • Thanks again! It's really helpful to have your response. That makes sense, those variables could ruin the layout. The absolute positioning was just to try and fix the ratio. Allowing scrolling makes sense too, but I'd rather avoid it (I know that could lead to trouble...). I still can't get columns to work inside a fixed ratio box, but think I'll use something like this for now: [http://jsfiddle.net/0vqLnb2o/](http://jsfiddle.net/0vqLnb2o/). Thanks again. – Suresure Dec 06 '15 at 20:19
1

Would this satisfy your requirement? http://jsfiddle.net/k5x7L682/3/

I used media query to increase the font-size at the break point:

@media (max-width: 44em) {
  p {
    font-size: 4.4vw;
  }
}

You will need to take column-gap and possible outer padding into consideration when calculating actual break point, but since your column width are relative to the view pot width (~50% of view port width), your font can be based on vw as well.

AVAVT
  • 7,058
  • 2
  • 21
  • 44