I have DIVs displayed as a table in my footer in order to make 4 columns. At < 800 pixels, I want them to break down into blocks. However, for some reason my code is not working. I can’t figure out why. I can’t even get them to display: none. Any thoughts? Thanks.
#footer {
width: 100%;
max-width: 1160px;
margin: 0 auto;
color: #FFF;
font-size: 1.7rem;
line-height: 2.4rem;
display: table;
table-layout: fixed;
}
.footer-col {
display: table-cell;
}
@media screen and (max-width: 799px) { /* This isn't working for some reason */
#footer {
display: block;
}
.footer-col
display: block;
}
}
<div id="footer">
<div id="footer-col1" class="footer-col">
<a href="/dev/" class="logo"><span class="logo-compare">compare</span><span class="logo-wear">wear.</span><span class="logo-com">com</span></a>
<strong>Website</strong><br>
<a href="/about/">About</a>
<a href="/contact/">Advertising</a>
<a href="/contact/">Contact</a>
</div>
<div id="footer-col2" class="footer-col">
<strong>Smartwatches</strong><br>
<a href="/dev/wearables/?vs=watch">Apple Watch</a>
<a href="/dev/wearables/?vs=peak">Basis Peak</a>
<a href="/dev/wearables/?vs=surge">Fitbit Surge</a>
<a href="/dev/wearables/?vs=vivoactive">Garmin Vívoactive</a>
<a href="/dev/wearables/?vs=gWatch">LG G Watch</a>
<a href="/dev/wearables/?vs=gWatchR">LG G Watch R</a>
<a href="/dev/wearables/?vs=moto360">Motorola Moto 360</a>
<a href="/dev/wearables/?vs=pebble">Pebble Smartwatch</a>
<a href="/dev/wearables/?vs=pebbleSteel">Pebble Steel</a>
<a href="/dev/wearables/?vs=gear2">Samsung Gear 2</a>
<a href="/dev/wearables/?vs=gearLive">Samsung Gear Live</a>
<a href="/dev/wearables/?vs=gearS">Samsung Gear S</a>
<a href="/dev/wearables/?vs=smartwatch">Sony Smartwatch 3</a>
<a href="/dev/wearables/?vs=activite">Withings Activité</a>
<a href="/dev/wearables/?vs=activitePop">Withings Activité Pop</a>
</div>
<div id="footer-col3" class="footer-col">
<strong>Fitness Bands</strong><br>
<a href="/dev/wearables/?vs=charge">Fitbit Charge</a>
<a href="/dev/wearables/?vs=chargeHR">Fitbit Charge HR</a>
<a href="/dev/wearables/?vs=flex">Fitbit Flex</a>
<a href="/dev/wearables/?vs=vivofit">Garmin Vívofit 2</a>
<a href="/dev/wearables/?vs=vivosmart">Garmin Vívosmart</a>
<a href="/dev/wearables/?vs=up24">Jawbone UP24</a>
<a href="/dev/wearables/?vs=up3">Jawbone UP3</a>
<a href="/dev/wearables/?vs=band">Microsoft Band</a>
<a href="/dev/wearables/?vs=gearFit">Samsung Gear Fit</a>
<a href="/dev/wearables/?vs=smartband">Sony SmartBand</a>
<a href="/dev/wearables/?vs=smartbandTalk">Sony SmartBand Talk</a>
<br> <strong>Other Activity Trackers</strong><br>
<a href="/dev/wearables/?vs=one">Fitbit One</a>
<a href="/dev/wearables/?vs=zip">Fitbit Zip</a>
<a href="/dev/wearables/?vs=upMove">Jawbone UP Move</a>
<a href="/dev/wearables/?vs=flash">Misfit Flash</a>
<a href="/dev/wearables/?vs=shine">Misfit Shine</a>
</div>
<div id="footer-col4" class="footer-col">
<strong>Random Wearables</strong>
<a href="/dev/wearables/?vs=watch&vs=gWatchR" class="randomLink"> Apple Watch<br><span class="vs"> vs. </span> LG G Watch R</a>
<a href="/dev/wearables/?vs=gWatch&vs=gearS&vs=smartband" class="randomLink"> LG G Watch<br><span class="vs"> vs. </span> Samsung Gear S<br><span class="vs"> vs. </span> Sony SmartBand</a>
<a href="/dev/wearables/?vs=watch&vs=chargeHR&vs=up3&vs=pebbleSteel" class="randomLink"> Apple Watch<br><span class="vs"> vs. </span> Fitbit Charge HR<br><span class="vs"> vs. </span> Jawbone UP3<br><span class="vs"> vs. </span> Pebble Steel</a>
<a href="/dev/wearables/?vs=one&vs=zip&vs=band&vs=gearS&vs=activitePop" class="randomLink"> Fitbit One<br><span class="vs"> vs. </span> Fitbit Zip<br><span class="vs"> vs. </span> Microsoft Band<br><span class="vs"> vs. </span> Samsung Gear S<br><span class="vs"> vs. </span> Withings Activité Pop</a>
</div>
</div>
.