CSS etwas anders eingestellt ausrichten auf Bildschirmauflösung je

Hier ist die Website i Entwicklung bin ...CSS etwas anders eingestellt ausrichten auf Bildschirmauflösung je

http://camerabeanbags.co.uk/test/

Dieser reagiert so, wenn Sie das Fenster Web-Browser nehmen und die Breite ändern Sie sehen können die Website ändert sich. Wenn Sie auf die Schaltfläche "Ihr Warenkorb" oben rechts in der grünen Leiste schauen, können Sie sehen, dass sie rechts ausgerichtet ist. Wenn Sie die Breite des Webbrowserfensters ändern, wird es an der linken Seite ausgerichtet.

Wie kann ich die Breite ändern, die der Webbrowser haben muss, bevor er diese nach links richtet, so wie ich es nur tun möchte, wenn kein Platz für sie nebeneinander ist. Wie bei einem iPad richtet es sich nach links aus, aber ich möchte, dass es nach rechts ausgerichtet wird. Ich habe es mit dem CSS @media versucht, kann es aber für dieses bestimmte Element nicht herausfinden.

Bitte helfen Sie mir mit dem CSS, das ich brauche, damit es nur bei einer bestimmten Bildschirmbreite nach links ausgerichtet ist.

Danke,

Harvey

Quelle

2017-06-26 Harvey

Können Sie Ihr Problem genauer beschreiben? Da Sie in einer Medienabfrage alle gewünschten CSS-Dateien ablegen können, verstehe ich das Problem nicht. –

Ich brauche nur etwas CSS, das das obige tun wird. Und etwas Hilfe bei der Verwendung der Medienabfrage, da ich sie nur einmal benutzt habe. Wenn du meine Webseite http://camerabeanbags.co.uk/test/ öffnest und dann die Breite des Browserfensters verkleinert siehst du, dass der 'view cart' Button nach links übergeht, auch wenn Platz dafür vorhanden ist das Recht. Ich möchte es immer nach rechts ausrichten, es sei denn unterhalb einer bestimmten Breite auf Auflösung dann richtet es sich nach links wenn du mich bekommst – Harvey

Wenn nicht, werde ich später noch einige Screenshots für dich bekommen :) – Harvey

Im CSS für Ihre Website gibt es bereits eine Medienabfrage, die dazu führt, dass sich der Einkaufswagen nach links bewegt. Es sieht wie folgt aus:

@media (max-width: 767px) { 
    #topbar .kad-topbar-left, #topbar .kad-topbar-left .topbarmenu { 
    float: none; 
    } 
}

Above 767px, den Stil für diese beiden Elemente float: left ist.

Wenn wir diese Regel löschen, so dass die Elemente weiter nach links schweben, können wir sehen, dass der Wagen immer noch in eine Zeile mit der Suche bis zu 417px breit passt. Also würde ich empfehlen, den Wert in der Medienregel zu überarbeiten (mit einer runden Zahl):

Quelle

2017-06-26 18:32:15 cjl750

Ich werde versuchen, die CSS-Datei mit diesem darin zu finden, und wenn nicht, werde ich es einfach hinzufügen und es als wichtig markieren, um zu sehen, ob es Priorität hat. Sie haben eine Idee, wie ich die Entwicklerwerkzeuge in Chrome verwenden kann, um herauszufinden, welche Datei dieses CSS hat? – Harvey

Ja, klicken Sie mit der rechten Maustaste auf den kleinen Einkaufswagen und klicken Sie auf "Inspizieren". Bewegen Sie sich durch das DOM auf der Registerkarte "Elemente", bis Sie sich auf "div.topbarmenu.clearfix" (das übergeordnete Element der Shopping-Karte "ul") befinden. Beschränken Sie Ihren Bildschirm auf unter 767px, und die Medienabfrage wird auf der Seite unter der Liste der Stile angezeigt. Es hat einen Link zum genauen Pfad der CSS-Datei. Sie können das für jede Stilregel tun. Diese spezielle Regel kommt von http://camerabeanbags.co.uk/test/wp-content/cache/wpfc-minified/5b7710815d7edcd601d0f9fc87e4bd73/1498383061index.css. – cjl750

Danke für die Tipps, habe es jetzt funktioniert und sieht gut aus. – Harvey

.kad-topbar-left{ 
    float: right !important; 
}

Auf diese Weise dauert es nicht in voller Breite auf kleinere Fensterbreiten.

Quelle

2017-06-26 13:50:48 mikepa88

Hi, das habe ich schon mal probiert und sieht auf einem Tablet gut aus, aber auf einer mobilen Ansicht ist es immer noch rechts ausgerichtet, und die Suchleiste ist nach links ausgerichtet, so dass es einfach nicht gut aussieht, irgendwelche anderen Ideen? – Harvey

CSS etwas anders eingestellt ausrichten auf Bildschirmauflösung je

Antwort

Verwandte Themen