Mobile Containerbreite inkorrekt vs. Desktop

Ich habe eine Website für eine Firma übernommen und als sie mir übergeben wurde, gab es ziemlich viel Arbeit, um es dahin zu bringen, wo es jetzt ist. Einige der Sachen auf der Seite, die die Besitzer behalten wollen, einige erlauben mir, mich zu ändern. Eine Sache, die ich gerade herausfinden möchte, ist, wie man die mobile Version mit der Desktop-Version in Einklang bringt. Im Hochformat scheint die Containerbreite zu klein zu sein. da ist Platz nach rechts und einige Bilder überlappen sich. Ich habe die Empfehlungen in anderen Threads versucht, die die gleiche Frage zu stellen scheinen, aber nichts hat funktioniert, also dachte ich, dass ich meine eigene Frage posten würde, falls ich den falschen Code ändere.Mobile Containerbreite inkorrekt vs. Desktop

ich hinzugefügt:

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

und sah für so ziemlich jede "Breite" in der CSS, aber ohne Erfolg. Was fehlt mir noch? Hier

ist die Website:

http://leisurelandrvcenter.com/

speziell das "Inventar" Seite:

http://leisurelandrvcenter.com/inventory/

- Haftungsausschluss -

Dies scheint nur auf bestimmte passieren Geräte und nur im Hochformat. Der Querformat-Modus funktioniert bei den geprüften Geräten einwandfrei (nur Android). Vielen Dank im Voraus!

Quelle

2016-05-18 aarmfield

Wenn Sie es reaktionsfähig machen wollen, müssen Sie loswerden alle festen Breite gibt es auf der CSS, zum Beispiel:

, wenn Sie die Inventarseite reaktionsfähiger machen möchten, müssen Sie die folgende CSS bearbeiten müssen:

#layout-content { 
    width: 1285px; 
}

dazu:

#layout-content { 
    max-width: 1285px; 
    width: auto; 
}

Dann, um die Bilder, um die Größe (f oder beispielsweise das Logo) finden Sie die folgende CSS gesetzt haben:

img { max-width:100%; width:auto; }

Anstatt das img Tag der Verwendung sollten Sie die CSS-Klasse oder ID des Logos oder einem Bild, das Sie anspricht machen wollen verwenden.

Quelle

2016-05-18 09:22:05 Signo

Ich habe den gesamten Code geändert, den Sie angegeben haben, und es wurde nicht korrigiert. Ich änderte alles, was ein "1285px" hatte (das gab es nur 5 Elemente), um die "max-width: 1285px; width: auto" zu haben. Ich weiß nicht, welche anderen Elemente geändert werden sollen. Sollte ich alle Breiten auf "auto" ändern, auch wenn sie 600 oder so sind? Für "img" gibt es ein Paar, das ich gefunden habe: '.mobile-view.widget-text img { \t höhe: auto; \t max-Breite: 100%; \t Breite: Auto; } ' Ist das in Ordnung? – aarmfield

Okay, ich habe die mobile Website so eingerichtet, wie wir sie brauchen, aber jetzt ist die Desktop-Version ein wenig aus. Hier ist, was ich getan habe: Ich fügte eine Klasse zu jedem der Bilder, und legte ihre Attribute an: '\t max-width: 100%; \t Breite: Auto; ' Die mobile Website funktioniert perfekt, aber jetzt sind die Bilder auf dem Desktop aus Größe. Einige sind kleiner als andere und es wirkt seltsam. Irgendwelche Ideen, was man hier ändern kann? – aarmfield

Es scheint, als ob die Bilder, die ich verlinkt habe, unterschiedliche Größen haben. Nach der Größenanpassung passen sie ein bisschen besser, aber jetzt kann ich sie nicht ausrichten. Ich schaute auf den Code für den Tisch und jeder Tisch hat eine andere Größe. Ich kann nicht finden, wo diese Größe gehalten wird, da einige der Klassen "widget widget-script" nicht in der CSS-Datei sind. Kennen Sie eine Möglichkeit, alle Tabellen so zu vergrößern, dass sie dieselbe Größe haben? – aarmfield

Die Bilder sind zu groß für kleine Bildschirme. Sie können Medienmitteilungen zu Ihrem CSS hinzufügen, die die Breite von Bildern für kleinere Bildschirme auf 100% setzen. (Und sowieso CSS verwenden, um IMG-Größen zu setzen, anstatt IMG-Attribute in der HTML)

Quelle

2016-05-18 08:57:26 Erik

Könnten Sie mir ein Beispiel dafür geben, was ich hier einbauen könnte? Ich weiß, ich brauche "@media", aber was danach? – aarmfield

zum Beispiel: @media Bildschirm und (max-Breite: 800px) {img {Breite: 100%}} - Seien Sie einfach sicher, dass Sie die Größenattribute aus dem HTML nehmen. Sie könnten Bildklassen für Größen angeben und Medienabfragen für die Feinabstimmung verwenden. – Erik

Mobile Containerbreite inkorrekt vs. Desktop

Antwort

Verwandte Themen