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?

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    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 as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    [FONT=Consolas][COLOR=#888888][COLOR=#222222]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)[/COLOR]
    [/COLOR][COLOR=#888888][COLOR=#222222]html[/COLOR][/COLOR] {
    #page {
    max-width: 500px !important;
    }
    [/FONT][FONT=Consolas]}

    oder

    [/FONT] Media (max-width:768px) {
    #page {
    max-width: 500px !important}
    }
    [FONT=Consolas]
    [/FONT][FONT=Consolas]
    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.[/FONT]

    Einmal editiert, zuletzt von Drag and Drop (7. Dezember 2017 um 13:57)

    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°

    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.

    Einmal editiert, zuletzt von Drag and Drop (7. Dezember 2017 um 16:20)

    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) {

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

    }
    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!

    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

    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;
    }
    }

    '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.

    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

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden