Eine Website responsive machen

Diskutiere Eine Website responsive machen im HTML / CSS / JScript / AJAX Bereich.
N

NilsVonBismarck

Hey Leute!

Ich arbeite gerade an meiner Website habe sie auch schon ziemlich fertig möchte sie aber responsive für Smartphones und Tablets machen.

Ich habe auch schon eine Idee mit FontAwesom zu machen aber es funktioniert einfach nicht.

CSS:
/* MOBILE */

@media screen and (max-width: 480px) {
    #logo {
        width: 90px;
        margin-left: 30px;
    }

    header nav {
        margin: 0;
        float: none;
    }

    .fa-bars {
        font-size: 17px;
        display: inline-block;
        width: 100%;
        cursor: pointer;
        text-align: right;
        float: right;
        margin: -25px 30px 0 0;

    }

    .fa-bars {
        opacity: 0.5%;
    }

    header nav ul {
        height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    header nav ul.open {
        height: auto;

    }

    header nav ul li {
        width: 100%;
        padding: 5px 0;
        margin: 0;
        font-size: 11px;
        border-top: 1px solid #dddddd;
    }

    header nav ul li:hover {
        background-color: #eeeeee;
    }

    #home h1 {
        font-size: 60px;
        margin-top: 200px;
    }

    #home h2 {
        width: 70%;
        height: auto;
    }

    #projects img {
        width: 70%;
        height: auto;
    }

    form input, form textarea {
        width: 70%;
    }

    .button {
        width: 72%;
    }
}

/* TABLETS */

@media screen and (max-width: 1024px) {
    header {
        height: auto;
    }

    #logo {
        width: 100px;
        margin-top: 5px;
    }

    header nav {
        margin-top: 0;
    }

    header nav ul li {
        font-size: 12px;
    }

    #home h1 {
        font-size: 90px;
        margin-top: 200px;
    }

    #home h2 {
        font-size: 22px;
    }

    h3 {
        padding-top: 12%;
    }

    #about p {
        width: 80%;
    }

    #projects {
        width: auto;
    }

    #projects ul li {
        width: 100%;
        float: none;
    }

    #projects ul li:last-child {
        padding-bottom: 20%;
    }

    #projects img {
        width: 55%;
        height: auto;
    }

    form input, form textarea {
        width: 60%;
    }

    .button {
        width: 62%;
    }

    
}
Vielen Dank schoneinmal im Voraus!
 
L

LimDul

Das CSS, was du oben gepostet hast, ist aber nicht eingebunden aktuell.
 
Thema: 

Eine Website responsive machen

Passende Stellenanzeigen aus deiner Region:
Anzeige

Neue Themen

Anzeige

Anzeige
Oben