CODEWITHSUNDEEP
htmlcssresponsive-designmultiple-columnsviewport
Suresure
Suresure

Reputation: 153

Responsive columns (but no more than two) with a fixed aspect ratio

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...

Upvotes: 0

Views: 77

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105923

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.)

Upvotes: 2

AVAVT
AVAVT

Reputation: 7133

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.

Upvotes: 1

Related Questions