Eine Website responsive machen

[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.

/* 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!

 

[mihe7]

es funktioniert einfach nicht.

Ist jetzt nicht gerade eine Fehlerbeschreibung, die weiterhelfen würde.

Was funktioniert nicht?

Und, hast Du in Deiner HTML den Viewport angegeben?

<meta name="viewport" content="width=device-width, initial-scale=1">

 

[NilsVonBismarck]

Ja ich habe den Viewport angegeben. Mach dir ein eigenes Bild von meiner Websit beta.nilsdoering.de

 

[LimDul]

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

 

[NilsVonBismarck]

Warum nicht?

 

[LimDul]

Das weiß ich doch nicht

Eingebunden ist das:
http://beta.nilsdoering.de/css/style.css

Und da finde ich keine Media-Querys

 

[NilsVonBismarck]

Ja gut...