gomarybetsy
New Coder
Hey, y'all. I'm trying to create columns with a minimum height that matches my tallest column — or to force the columns to stack vertically one on top of the other when the screen has a smaller width. When the screen is around 675 pixels, the columns stack in a weird way that I can't figure out how to avoid. I realize this is a very ambitious goal for my coding expertise, so if you can offer a solution, I'd really appreciate it!
Code:
<!-- COLUMN STYLING -->
<style>
.column {
margin-right: 50px;
margin-bottom:0px;
padding-right: 45px;
float: left;
}
.row {
display: table;
margin-left: 0px;
flex-wrap: wrap;
flex-direction: row;
}
@media screen and (max-width: 300px) {
.column {
width: 100%;
display:block;
}
}
</style>
<!-- BOOKMARKS -->
<div class="row">
<div class="column" >
<button class="grey-label-subhead">Composition</button><br>
<p class="bookmarks">
00:00 → Flip<br>
00:00 → Crop<br>
00:00 → Auto reframe<br>
00:00 → Ultra key<br>
</p><br>
</div>
<div class="column">
<button class="grey-label-subhead">Timing & stability</button><br>
<p class="bookmarks">
00:00 → Speed<br>
00:00 → Frame hold<br>
00:00 → Warp stabilizer<br>
</p><br>
</div>
<div class="column">
<button class="grey-label-subhead">Image quality</button><br>
<p class="bookmarks">
00:00 → Gaussian blur<br>
00:00 → Unsharp mask<br>
00:00 → Noise<br>
00:00 → Neat Video<br>
</p><br>
</div>
<div class="column">
<button class="grey-label-subhead">Graphics</button><br>
<p class="bookmarks">
00:00 → Color replace<br>
00:00 → Drop shadow<br>
00:00 → Faux stroke<br>
00:00 → Circle<br>
</p><br>
</div>
<div class="column">
<button class="grey-label-subhead">Recap</button>
<p class="bookmarks">
00:00 → PPP tasks
</p>
</div>
</div>
<!-- BUTTON STYLING -->
<style>
.grey-label-subhead {
background-color: #ebebeb;
color: #000000;
padding: 2px 6px;
line-height: 1;
border-radius: 2px;
border: 2px solid #ebebeb;
text-transform: uppercase;
letter-spacing: .06em;
font-size: 13px;
font-weight: 600;
margin-bottom: 4px;
margin-top: 0px;
pointer-events: none;
word-spacing: 2px;
text-align: left;
vertical-align: middle;
}
</style>