Frage von Croghs, 42

HTML Liste wieder untereinander?

Hallo Community, ich habe einen footer mit einer Liste erstellt, die ab 800px untereinander dargestellt werden soll. Nun meine Frage, wie ich das hinbekomme...

<footer class="footer">
<div class="footercontent">
    <ul class="footerlist">
        <li class="footerpoint">
            <a href="about.html" class="footerlink about" title="Über uns">Über uns</a>
        </li>
        <li class="footerpoint">
            <a href="terms.html" class="footerlink terms" title="Datenschutzerklärung und Nutzungsbedingungen">Rechtliches</a>
        </li>
        <li class="footerpoint">
            <a href="help.html" class="footerlink help" title="Hilfe">Hilfe</a>
        </li>
        <li class="footerpoint">
            <a href="develop.html" class="footerlink develop" title="Entwicklung">Entwicklung</a>
        </li>
        <li class="footerpoint">
            <a href="donate.html" class="footerlink donate" title="Unterstützen">Unterstützen</a>
        </li>
        <li class="footerpoint">
            <a href="impressum.html" class="footerlink impressum" title="Impressum">Impressum</a>
        </li>
        <li class="footerpoint">
            <p class="footerlink copyright" title="Copyright"><i class="fa fa-copyright"></i> 2015 Stuport Dev.</p>
        </li>
    </ul>
</div>
</footer>

.footer {
height: 35px;
background-color: transparent;
bottom: 0;
left: 0px;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 2px;
}

.footercontent {
width: 1140px;
margin: 0px auto;
}


.footerlist {
margin-left: auto;
margin-right: auto;
border: none;
display: inline-block;
}

.footerpoint {
display: inline-block;
width: auto;
line-height: 36px;
margin: 0px 15px;

}

.footerlink {
text-decoration: none;
font-family: Source Sans Pro, sans-serif;
color: #A5A5A5;
font-weight: 400;
font-size: 15px;
float: left;
transition-duration: 0.2s;
 }

.footerlink:hover {
color: black;
transition-duration: 0.2s;
}

@media (max-width: 800px) {

.footerpoint{
    line-height: 48px;
}

.footerlink {
    border-bottom: 2px solid #E2E2E2;
    width: 100%;
}

.footerlist {
    width: 100%;
    float: left;
}

.footer {
    padding-top: 5px;
}

.footercontent {
    width: 100%;
    margin: 0px 30px;
    box-sizing: border-box;
}


}

Danke für jede Hilfe ;)

Croghs

Antwort
von Steffile, 29
@media (max-width: 480px) {

.footerlinks li {display:block}
}

Wobei du die 480px mit deiner gewuenschten Breite ersetzt.

Kommentar von Croghs ,

Dankeschön!

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten