Mobile Site wird nicht korrekt angezeigt

Question

So habe ich ein Problem, bei dem meine Website auf der rechten Seite viel Polsterung hat, wodurch das Layout falsch geladen wird. Es erscheint korrekt auf meinem Desktop, wenn die Größe des Fensters geändert wird, aber alles andere als die Kopfzeile bricht, wenn es auf meinem Telefon angezeigt wird. All relevanten divs sind auf eine Breite von 480px gesetzt, und ich habe den folgenden Tag in meinem Header für die Abfrage Medien:

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

Hier sind Screenshots, wie es scheint, auf Desktop-und mobilen sowie einen Link zu meiner mobilen CSS-Seite (das Menü ist auf dem Handy geöffnet, aber der zusätzliche Speicherplatz scheint es auch zu beeinflussen).

CSS Page

Edit: Ich bin jetzt ein etwas anderes Problem haben, wobei die Marge auf die gesamte rechte Seite des Bildschirms hinzugefügt wurde. Ich änderte die Pixelbreiten für viele Divs auf 100% und fügte dem Header auch das <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-Tag hinzu. Während sie nicht mehr herauszoomen können, können Sie den Bildschirm nur horizontal scrollen, um die Auffüllung zu finden. Ich habe auch ein Problem mit meinem font-face-Tag, das die Header-Schriftarten nicht mehr lädt. Ich habe die CSS-Datei aktualisiert, also hoffentlich zeigt das, warum es nicht mehr funktioniert.

auch, hier ist ein Link zu der Live-Website: Link

Answer 1

Sie sollten explizite Breiten nicht hier einstellen, (zumindest nicht in Pixel sowieso) und von einem kurzen Blick auf das, was Sie habe mir geschrieben, ich könnte mir vorstellen, dass das dein Problem ist.

Erstens, nehmen Sie die Breiten, die Sie für alles, was Sie beabsichtigen auf "volle Breite" abheben - erinnern divs sind Block-Level-Elemente sowieso, also, wenn Sie überhaupt keine Breite setzen, sie ' Ich habe eine Breite von 100%.

Zweitens, entfernen Sie alle anderen Pixelbreiten, die Sie einstellen, und ändern Sie sie stattdessen als Prozentsätze.

Drittens sparen Sie sich eine Menge Kopfzerbrechen, wenn Sie 'box-sizing' auf 'border-box' setzen (ich würde es aus Gründen der Einfachheit einfach '*' vorschlagen). Dies verhindert, dass die Füllung und der Rand oberhalb der von Ihnen als Prozentwert festgelegten Breite hinzugefügt werden. Sie werden stattdessen in die Boxgröße einbezogen.

Schließlich kann ich nicht genug betonen, wie wichtig es ist, aus der Denkweise von Dingen wie "Mobile" und "Desktop" herauszukommen. Wir reden hier nur von verschiedenen Darstellungsgrößen. :)

Wenn Sie einen Live-Link haben, den Sie teilen können, wäre ich mehr als glücklich, einen richtigen Blick darauf zu haben.

Answer 2

Folgendes Ihre CSS-Datei hinzufügen:

img{max-width:100% !important}