I'm using several media queries to control the amount of columns for different screen sizes. When the page loads, it works great. However I'm noticing that when I shrink the width of the window to almost nothing and then expand it to full width again, even though I've specified column-count to be 4, it only shows 2 columns, with a blank space where the right 2 columns should be. All the content is still there. Just squashed up into the left side. When I look at the current css rules being applied, it still says column-count is 4. I'm not sure what's going on. Tips please? Thanks!
Relevant CSS I'm using:
.reviews{
width: 100%;
padding: 1vw;
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
}
Working example: http://jsfiddle.net/1o12sqsq/
Snippet:
body{
font-size: 16px;
margin:0;
}
div, form{
box-sizing: border-box;
}
.top-bar{
color: white;
background:black;
margin:auto;
text-align: left;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 10px;
/*border-bottom: white 3px solid;*/
}
.top-bar .oyster{
font-size: 40px;
}
.top-bar ul{
float:right;
}
.top-bar li{
text-decoration:none;
display:inline-block;
}
.top-bar a{
text-decoration:none;
color: white;
}
.top-bar ul li .item{
font-size: 18px;
padding-right:20px;
}
.presenting{
margin-top: 3vh;
font-size: 2vmax;
display:block;
text-align:center;
}
.current{
text-align:center;
font-size: 10vmax;
}
.reviews{
width: 100%;
padding: 1vw;
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
}
.review{
display:inline-block;
padding-bottom: 20px;
}
.question{
color:brown;
font-size: 1.3em;
}
.answer{
font-size: 1.8em;
}
@media (max-width:797px){
.reviews{
width: 100%;
padding: 1vw;
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
}
@media (min-width:798px) and (max-width:1200px){
.reviews{
width: 100%;
padding: 1vw;
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
}
@media (min-width:1201px){
.reviews{
width: 100%;
padding: 1vw;
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
}
}<!DOCTYPE html>
<body>
<div class="top-bar">
<a href="/" class="oyster">Oyster</a>
<ul>
<li><a class="item" href="/review_form/">Write</a></li>
<li><a class="item" href="/profile/">andrew</a></li>
<li><a class="item" href="/logout/">Log out</a></li>
<li><a class="item" href="/archives/">Archives</a></li>
</ul>
</div>
<span class="presenting">Presenting this week's subject,</span>
<h1 class="current">The Ocean</h1>
<div class="reviews">
<div class="review">
4 by andrew
<div class="question">What is your favorite spot?</div>
<div class="answer">sad</div>
<div class="question">Do you like the ocean?</div>
<div class="answer">not really</div>
<div class="question">What is your favorite spot?</div>
<div class="answer">sleeping</div>
</div>
<div class="review">
3 by andrew
<div class="question">Would you like to live there?</div>
<div class="answer">frog</div>
<div class="question">What is your favorite spot?</div>
<div class="answer">butts</div>
<div class="question">What are some of the advantages of the ocean?</div>
<div class="answer">none</div>
</div>
<div class="review">
4 by andrew
<div class="question">Would you like to die in the ocean?</div>
<div class="answer">no</div>
<div class="question">Do you like the ocean?</div>
<div class="answer">naw</div>
<div class="question">Every year many people drown in the ocean. How do you feel about that?</div>
<div class="answer">god awful</div>
</div>
<div class="review">
4 by andrew
<div class="question">When was the last time you've been to the ocean?</div>
<div class="answer">I frankly do not remember.</div>
<div class="question">Every year many people drown in the ocean. How do you feel about that?</div>
<div class="answer">I feel god awful of course! How could such a petty thing happen to such important people in our lives?! I simply cannot believe this!!</div>
<div class="question">What are some of the advantages of the ocean?</div>
<div class="answer">Probably none.</div>
</div>
<div class="review">
3 by andrew
<div class="question">Would you sing by the ocean?</div>
<div class="answer">No sir!</div>
<div class="question">Would you like to die in the ocean?</div>
<div class="answer">Of course not, that is preposterous!</div>
<div class="question">What is your favorite spot?</div>
<div class="answer">My favorite spot would be to inside the a whale's tummy.</div>
</div>
</div>
</body>Looks like it's a Chrome-specific issue since Firefox shows it all right.
