1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Seitenbreite - Desktop vs Smartphone

Dieses Thema im Forum "Design" wurde erstellt von Drag and Drop, 7. Dezember 2017.

  1. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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. SEpp55

    SEpp55 Well-Known Member

    Registriert seit:
    3. Februar 2016
    Beiträge:
    3.138
    Zustimmungen:
    591
    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!!
     
  3. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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.
     
    #3 Drag and Drop, 7. Dezember 2017
    Zuletzt bearbeitet: 7. Dezember 2017
  4. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    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°
     
  5. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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.
     
    #5 Drag and Drop, 7. Dezember 2017
    Zuletzt bearbeitet: 7. Dezember 2017
  6. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    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. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    '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.
     
  10. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    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;
    }
     
  11. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    ... beim nächsten Problem bitte einfach den Link zur Seite posten - das hilft ungemein ;)!
     
  12. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    Ja ich weiß :|. Das geht aber leider nicht.
    Der Inspektor hilft ungemein.
    Ich hatte beim ersten Versuch bloß eine Bezeichnung vergessen und schon...
    Genauigkeit ist bei CSS,HtML.. einfach alles
     
  13. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
    Nur zur Info:

    Diese Regel gilt für das html Element und für das Element #page im Element body. Ich vermute, das ist ein Fehler (auch wenn es zufällig funktioniert).
     
  14. Drag and Drop

    Drag and Drop Well-Known Member

    Registriert seit:
    7. Dezember 2016
    Beiträge:
    411
    Zustimmungen:
    0
    Wie müsste es richtig sein? Nur body #page ohne html?
     
  15. danielgoehr

    danielgoehr Well-Known Member

    Registriert seit:
    13. Juli 2016
    Beiträge:
    2.674
    Zustimmungen:
    128
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden