Weitere Informationen und den Download findest du auf der offiziellen Anlaufstelle de.wordpress.org
Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 15
Like Tree3Likes

Thema: Seitenbreite - Desktop vs Smartphone

  1. #1
    PostRank: 3
    Registriert seit
    07.12.2016
    Beiträge
    149

    Seitenbreite - Desktop vs Smartphone

    Hi,

    ich habe gerade meine Seite auch für alle großen Bildschirme (bis 2000px)

    eingestellt und danach gemerkt, dass sich die Seitenbreite der

    kleinen Smartphone (Breite ca. 320px, iPhone 4...) verengt hat. Dreht man sie

    um 90 Grad wird alles perfekt angezeigt.

    Ich hab im Custom CSS folgenden Befehl eingegeben:



    html, body


    #page {
    margin: 2em 2em;
    max-width: 2000px !important;
    }


    Frage: Kann ich über media queries die Smartphone (Tablets gehen alle)

    wieder breiter machen, also zum ursprünglichen Zustand zurückführen?


  2. #2
    PostRank: 5
    Registriert seit
    03.02.2016
    Beiträge
    367
    Ja kann man, wenn man es kann
    Da du es bis jetzt bewußt vermieden hast irgend etwas von hier (besonders II) zu erfüllen eine allgemeine Antwort.

    Die Darstellung für verschieden Ausgabegeräte wird in Media Queries festgelegt.
    Da in diesen Forum oft die Hilfe zur Selbsthilfe angesprochen wurde, halte ich das oft auch so.
    Wenn du den Begriff "Media Queries" in der Suchmaschine deines Vertrauens eingibst kannst du dich gut einlesen.
    In der style.css findest du in den @media - Anweisungen mehr.

    Änderungen wie immer im Dashboard unter Design - Customizer - Zusätzliche CSS machen!!
    nothing is so easy as it looks

  3. #3
    PostRank: 3
    Registriert seit
    07.12.2016
    Beiträge
    149
    Ich hab die Seite mit dem Inspektor untersucht und einfach keinen Weg gefunden,

    die Breite von den kleinen Smartphone zu verändern.

    Nach meiner Logik müsste ich doch einfach nur den Media Querie-Befehl mit dem

    Befehl zur Seitenbreite kombinieren??


    @media screen and (max-width: 782px)

    html {
    #page {
    max-width: 500px !important;
    }
    }

    oder

    @media (max-width:768px) {
    #page {
    max-width: 500px !important}
    }


    Das iPhone 4 ist beispielsweise bei 320 mal 480 Pixel.

    Durch obige Formatierung müsste das Geräte doch eigentlich mit beiden Breiten angesprochen werden?

    Wenn ich #page {} weglasse, funktionierts auch nicht.
    Geändert von Drag and Drop (07.12.2017 um 13:57 Uhr)

  4. #4
    PostRank: 4
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    160
    Leider hast du den Hinweis von @SEpp55 offensichtlich noch nicht zur Kenntnis genommen... wie soll man dir helfen, wenn du nur seltsame Abschnitte aus deinem CSS postest, ohne uns wirkliche Hinweise zu geben, wo wir uns die Sache und damit das Problem mal anschauen können.
    Aber anscheinend hast du auch nicht wirklich verstanden, was du machst... mit 'max-width:500px;' wirst du auf jeden nichts werden, damit begrenzt du nur zusätzlich die Möglichkeiten deiner Seite sich größer als 500px auszudehnen... hmmm... du hast da ja eh nur 480px in Querrichtung.
    Aber was ist mit dem Margin von 2em, dass du offensichtlich in deinem CSS für html, body und #page hast? Mach das mal mit der @media Query für kleine Bildschirme kleiner (oder 0) und lass die max-width so wie sie ist°
    SEpp55 likes this.

  5. #5
    PostRank: 3
    Registriert seit
    07.12.2016
    Beiträge
    149
    Die 2 em hab ich auf null gesetzt.

    margin: 0em 0em;


    @media screen and (max-width: px)
    #page {


    }

    Was soll ich denn eingeben, um z.B. das Smartphone 4 responsive zu machen?

    Es muss hierfür doch einen Standard-Befehl geben wie für andere Dinge (hover, font...) auch??

    Ab ca. 400px (iPhone6 / Nexus) wird alles perfekt dargestellt. Es geht nur um diesen kleinen

    Abschnitt von 300 zu 400 px.
    Geändert von Drag and Drop (07.12.2017 um 16:20 Uhr)

  6. #6
    PostRank: 4
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    160
    Dann sag uns doch bitte, was unterhalb von 400px nicht mehr 'perfekt' dargestellt wird.
    Aber der erste Teil dessen, was du anzupassen hast, müsste damit klar sein - du brauchst eine @media Query, die dir unterhalb von 400px deine Formate anpasst... also..
    @media only screen and (max-width: 400px) {

    /* und hier gehören alle die Dinge rein, die nicht 'perfekt' sind!
    zB
    body {
    font-size: 0.9em;
    }
    ... */


    }
    Aber da du immer noch nicht gesagt/gezeigt hast, was dein Problem ist und was an die Bildschirmgröße <400px angepasst werden soll, kann dir auch keiner weiter helfen!

  7. #7
    PostRank: 3
    Registriert seit
    07.12.2016
    Beiträge
    149
    Ich hatte eigentlich schon in der Frage formuliert, dass die Seitenbreite bei kleinen Smartphones verengt ist.

    Sorry ein wenig ungeschickt ausgedrückt.

    Die Ränder der Seite werden bei kleinen Smartphones sehr groß, sodass

    beide Ränder zusammen so groß wie die angezeigte Seite sind. Dadurch wird das Menü sehr klein

    und zeigt die Reiter nicht mehr richtig an. Ich möchte das der Content-Bereich und das Menü wieder

    breiter werden.

    Danke für Eure Hilfe

  8. #8
    PostRank: 3
    Registriert seit
    07.12.2016
    Beiträge
    149
    Ixch habs noch mal kurz skiziert: A = Angezeigt-Seite
    --- = Ränder


    -------------- AAAAAAAAA --------------


    Die Ränder sollen mindestens halbiert werden, damit sich der Content-Bereich wieder ausbreiten kann.

    Ich hab schon folgendes ausprobiert: Geht aber nicht

    @media only screen and (max-width: 400px) {


    body {
    margin: 0em 0em;
    }
    }

  9. #9
    PostRank: 4
    Registriert seit
    13.06.2017
    Ort
    Im hohen Norden
    Beiträge
    160
    'Ränder' lässt darauf schließen, dass du in deinem CSS 'padding' oder 'margin' Werte vorgibst, die zu dieser Verengung führen.
    Benutze mal den 'Inspektor' deines Browsers (normalerweise startet der mit 'F12') und untersuche die Elemente deiner Seite, ob da irgendwas mit margin und/oder padding zu finden ist.
    Drag and Drop likes this.

  10. #10
    PostRank: 3
    Registriert seit
    07.12.2016
    Beiträge
    149
    Ich habs gefunden. Folgende Formatierung passt für alle. Danke für Eure Zeit und Geduld!!!

    @media only screen and (max-width: 500px) {


    html, body #page {
    margin: 0em 0em;
    }

Seite 1 von 2 12 LetzteLetzte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •