Having some difficulty creating a responsive Tagcloud.
Encountering issues in the max-width 400px section.
Despite using width: auto and box sizing border-box, a horizontal scrollbar appears at 326px in Chrome, as shown in the image below.
https://i.sstatic.net/rBfYp.png
Anyone have a solution for this?
body{
color:#122e45;
font-family: Verdana,sans-serif;
font-size:11px;
line-height:16px;
background-color:#fafafa;
margin:0;
padding:0;
min-width:320px;
}
/* Helpers */
.before:before {
display: table;
content: " ";
}
.after:after {
content: " ";
display: table;
clear: both;
}
#tagCloud {
max-width:960px;
margin: 0 auto;
}
#tagCloud .quarter {
width:25%;
padding: 10px 5px;
box-sizing:border-box;
max-width:240px;
float:left;
}
#tagCloud ul {
list-style-type:none;
margin:0;
font-size:14px;
padding:0;
}
#tagCloud ul li {
height:26px;
}
#tagCloud ul li a {
text-decoration:none;
color:#122e45;
}
@media screen and (max-width: 760px) {
#tagCloud .quarter {
min-width:33.3333%;
}
#tagCloud .last {
clear:left;
min-width:100%;
}
#tagCloud .last:before {
display: table;
content: " ";
}
#tagCloud .last:after {
content: " ";
display: table;
clear: both;
}
#tagCloud .last li {
display:block;
float:left;
margin-right: 20px;
}
}
@media screen and (max-width: 580px) {
#tagCloud .quarter {
min-width:50%;
}
#tagCloud .last li {
display:list-item;
float:none;
margin-right: 0px;
width:100%;
}
#tagCloud .last {
clear:none;
}
#tagCloud .last:before {
content: "";
}
#tagCloud .last:after {
content: "";
}
}
@media screen and (max-width: 400px) {
#tagCloud .quarter {
width: auto;
float: none;
max-width: initial;
min-width: initial;
box-sizing:border-box;
}
#tagCloud .last:before {
content: "";
}
#tagCloud .last:after {
content: "";
}
}<div id="cmsContainer">
<div id="tagCloud" class="cmsElement before after">
<div class="quarter">
<ul>
<li><a href="#">IT Jobs</a></li>
<li><a href="#">Jobs für Ingenieure</a></li>
<li><a href="#">Fahrzeugbau & Zulieferer</a></li>
<li><a href="#">Personal</a></li>
<li><a href="#">Vertrieb</a></li>
<li><a href="#">Maschinenbau</a></li>
<li><a href="#">Beratung, Consulting</a></li>
<li><a href="#">Rechnungswesen</a></li>
<li><a href="#">Immobilien und Bau</a></li>
</ul>
</div>
<div class="quarter">
<ul>
<li><a href="#">Jobs im Marketing</a></li>
<li><a href="#">Pharma, Chemie</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">80.000 EUR Plus</a></li>
<li><a href="#">Sachbearbeitung</a></li>
<li><a href="#">Controlling</a></li>
<li><a href="#">Ärzte und Mediziner</a></li>
<li><a href="#">Pflege</a></li>
<li><a href="#">Jobs für SAP-Spezialisten</a></li>
</ul>
</div>
<div class="quarter">
<ul>
<li><a href="#">Sekretariat</a></li>
<li><a href="#">Recht und Steuern</a></li>
<li><a href="#">Banken, Finanzen</a></li>
<li><a href="#">Versicherung</a></li>
<li><a href="#">Energie</a></li>
<li><a href="#">Jugend- & Sozialarbeit</a></li>
<li><a href="#">Behörden, Kommunen</a></li>
<li><a href="#">Verbände, Vereine</a></li>
<li><a href="#">Schule und Bildung</a></li>
</ul>
</div>
<div class="quarter last">
<ul>
<li><a href="#">Auslandsjobs</a></li>
<li><a href="#">Direkteinstieg</a></li>
<li><a href="#">Trainee</a></li>
<li><a href="#">Ausbildung</a></li>
<li><a href="#">Praktikum</a></li>
<li><a href="#">Angebote der Woche</a></li>
<li><a href="#">Jobs nach Einsatzort</a></li>
<li><a href="#">Jobs nach Thema</a></li>
<li><a href="#">Jobs nach Unternehmen</a></li>
</ul>
</div>
</div>
</div>