Columns that adapt to different screen sizes while maintaining a fixed aspect ratio, limited to a maximum of two columns

Question

Columns that adapt to different screen sizes while maintaining a fixed aspect ratio, limited to a maximum of two columns

I'm facing a challenge trying to blend a few elements together:

My goal is to have two columns take up 100% of the browser width with a height that adjusts relative to this width.
I want these columns to switch to one column when the viewport is small.
And if possible, I would like the font size to adapt based on the column width rather than the viewport - so that when there's only space for one column, the font size is larger compared to when it's divided into two columns.

Here's my attempt at putting it all together: http://jsfiddle.net/k5x7L682/ - but the code to maintain the ratio creates some extra space at the bottom. See the 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;
}

Thank you for taking the time to go through this...

html css responsive-design multiple-columns viewport

Answer 1

Answer №1

To convert to a single column instead of two, you should utilize only the column-count property and remove column-width.

For adjusting the font size based on media queries:

http://jsfiddle.net/k5x7L682/2/ > compared to Chrome also 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 can set a max-width of 40em or similar for the #column container to prevent it from expanding too much if the intention was to have 2 columns each with a maximum width of 20em. (It's not very clear what was intended since vw units were used.)

Answer 2

To convert to a single column instead of two, you should utilize only the column-count property and remove column-width.

For adjusting the font size based on media queries:

http://jsfiddle.net/k5x7L682/2/ > compared to Chrome also 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 can set a max-width of 40em or similar for the #column container to prevent it from expanding too much if the intention was to have 2 columns each with a maximum width of 20em. (It's not very clear what was intended since vw units were used.)

Answer 3

Answer №2

Do you think this solution meets your needs? http://jsfiddle.net/8b4tK9un/2/

To address the font size increase at the specified breakpoint, I employed a media query:

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

When determining the actual breakpoint, factor in the column-gap and potential outer padding adjustments. Given that your column width is proportional to the viewport width (~50% of viewport width), using vw units for font sizing should align with the design.

Answer 4

Do you think this solution meets your needs? http://jsfiddle.net/8b4tK9un/2/

To address the font size increase at the specified breakpoint, I employed a media query:

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

When determining the actual breakpoint, factor in the column-gap and potential outer padding adjustments. Given that your column width is proportional to the viewport width (~50% of viewport width), using vw units for font sizing should align with the design.

Columns that adapt to different screen sizes while maintaining a fixed aspect ratio, limited to a maximum of two columns

Answer №1

Answer №2

Similar questions

Having trouble with enter key input not triggering?

The issue of CSS and PHP header include file not adjusting to device size and exceeding the full width of the screen

Is there a way for me to determine the quality of a video and learn how to adjust it?

Using jQuery to insert a div class with PHP referenced

Demonstrate how to pass a newline character from Ruby on Rails to JavaScript

Interactivity Battle: Clickable Div, Button, or href?

Utilizing Angular Material for Styling the Web

Learn the best way to utilize a stylus in Vue files to interact with JavaScript variables

Alter the color of the initially chosen option in the dropdown selection

What is the best way to incorporate two banners on the Magento homepage alongside my flexslider?

What is the best way to load the nested array attributes in an HTML table dynamically with AngularJS?

How can I dynamically resize an element based on the height of its content in Ionic?

Tips for extracting text from a selenium webelement icon that displays hovertext

Is there a way to automatically extract data from a CSV file and display it on a website using either PHP or JavaScript?

Conceal the div element if the value is either undefined or empty in AngularJS

JavaScript Event Listener causing the Sticky Position to Break

Selenium - Struggling to locate elements that are undeniably present on the website

Modifying an element's value according to user input: Step-by-step guide

Rotating 3D cube with CSS, adjusting height during transition

What is the best way to generate a dynamic preview (including image and description) for a shared URL on various social media platforms, Gmail, and Skype using React JS?