Wie kann man die Polsterung in der mobilen Ansicht reaktionsfähig machen?

Lesezeit: 2 Minuten

Benutzer-Avatar
Benutzer124889

Ich verwende WordPress und ich habe CSS verwendet, um die Breite meiner „Über“- und „Kontakt“-Seite zentrierter und kleiner zu machen, indem ich Padding hinzufügte. Wenn ich dies jedoch tue, insbesondere in der mobilen Ansicht (ich denke, Tablet ist in Ordnung), gibt es deswegen auf beiden Seiten weiße Flächen.

Das Thema, das ich verwende, ist meiner Meinung nach so aufgebaut, und ich konnte in diesem Thema nicht wirklich etwas finden, das die Elemente schmaler und auf der Seite zentriert erscheinen lässt, also habe ich stattdessen Padding verwendet, damit es so aussieht, wie ich es möchte.

‘Kontakt’-Seite meiner Website in der mobilen Ansicht

‘Portfolio’-Seite meiner Website in der mobilen Ansicht

Hier ist ein Link zu meiner Website: http://www.lisaweng.com/contact/

Gibt es ein CSS, das diese Seiten in der mobilen Ansicht normal oder in voller Breite erscheinen lässt, selbst wenn ich Padding hinzufüge, wie z Desktop-Version?

PS: Für das CSS zum Auffüllen der Seitenelemente „Über“ und „Kontakt“ habe ich Prozentsätze anstelle von Pixeln verwendet. Ich bin mir nicht sicher, warum es nicht vollständig reagiert, wenn es in der mobilen Ansicht angezeigt wird.

So sieht mein CSS für die Seite „Über“ und „Kontakt“ aus:

.cf7_custom_style_1 {
  padding-left: 20%;
  padding-right: 20%;
}

und

.aboutme {
  padding-left: 14%;
  padding-right: 14%;
}

Gibt es einen Code um das zu beheben? Oder eine Idee warum das so ist? Wenn es einen Code für die Korrektur der mobilen Ansicht gibt, wird er auch für Tablets gleich sein oder hat das Tablet auch ein CSS, um die Reaktionsfähigkeit so zu korrigieren, wie es sein sollte?

Benutzer-Avatar
WPZA

Verwenden von @media-Abfragen zum Hinzufügen von Haltepunkten in CSS.

Sie müssen Medienabfragen in Ihrem CSS-Code verwenden, um bestimmte Haltepunkte hinzuzufügen.

Das Hinzufügen zu Ihrem Stylesheet kann hilfreich sein:

@media only screen and (max-width: 950px) {
   .cf7_custom_style_1 {
      padding-left: 10%;
      padding-right: 10%;
   }
}

@media only screen and (max-width: 600px) {
   .cf7_custom_style_1 {
      padding-left: 0;
      padding-right: 0;
   }
}

Mit dem obigen Code werden Breakpoints bei 950px und 600px hinzugefügt. Bedeutet, dass Wenn die Fenstergröße = 950 Pixel ist, ändern Sie diese CSS-Klasse in diese Eigenschaften.

  • Hallo, vielen Dank für die Hilfe!! Ich schätze wirklich Ihren Code und den Hinweis auf Medienanfragen <333!!! =)) Ich glaube, ich verstehe die Medienanfragen jetzt besser, nachdem ich mir einige Websites darüber angeschaut habe. Durch Hinzufügen eines Doppelpunkts nach dem max-width: 950px-Teil funktionierte es wie im CSS gefunden. Frage, wissen Sie, ob es eine Möglichkeit gibt, den Leerraum zwischen dem Logo und dem Beginn des Kontaktformulars zu verringern? Ich habe versucht, padding-top: -10% zu setzen, was es nicht geändert hat. Weil es keine negativen Prozentsätze gibt, wie verkleinere ich diesen Platz? Die Verwendung von Pixeln nach dieser Padding-Right-Zeile funktionierte ebenfalls nicht

    – Benutzer124889

    1. Juli 2018 um 6:01 Uhr

  • Entschuldigung für den fehlenden Doppelpunkt. Ich habe den Code aktualisiert – gute Stelle! Wie für das Logo versuchen .logo_wrapper {top: 25px;} mit einer Medienabfrage.

    – WPZA

    1. Juli 2018 um 10:07 Uhr

  • Danke für die Antwort =)!! Und hoppla, ich meinte den weißen Raum zwischen dem Navigationsmenü und dem Beginn des Kontaktformulars und nicht das Logo und das Kontaktformular. Kennen Sie den Klassennamen, um diesen Bereich anzusprechen, wenn Sie eine Medienabfrage verwenden? Ich habe den von Ihnen geschriebenen Code ausprobiert und versucht, ihn mit: @media only screen und (max-width: 1200px) { .logo_wrapper {top: 25px;}} zu testen, und das Logo befindet sich an derselben Stelle. PS ist 950px und 600px die Standardgröße für Tablets und Mobilgeräte? frage mich..

    – Benutzer124889

    1. Juli 2018 um 20:48 Uhr

  • Versuchen .container_inner.default_template_holder {padding-top: 0;}. Bei den Standardgrößen sollten Sie jedes Pixel testen.

    – WPZA

    1. Juli 2018 um 21:06 Uhr


  • Bearbeiten: Ich habe den von Ihnen geschriebenen Code ausprobiert und es mit: @media only screen and (max-width: 950px) { .logo_wrapper {top: 25px;}} versucht und es hat funktioniert !!! DANKE!!! =))!!! Es hat einen Platz vor dem Logo in der Tablet-/Mobilansicht gemacht, was ich auch gesucht habe!! Vielen Dank für deine Hilfe und dein freundliches Herz <333 =))!!!

    – Benutzer124889

    1. Juli 2018 um 21:08 Uhr

1382380cookie-checkWie kann man die Polsterung in der mobilen Ansicht reaktionsfähig machen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy