Linke und rechte Ränder in Mobilansicht verkleinern (Protostar)

    Hallo zusammen,


    In der Mobilansicht (Protostar) verbrauchen rechte und linke Ränder fast ein Viertel der verfügbaren Breite. Das ist zuviel! Wie lassen sich die Ränder verringern?
    Super wäre eine Lösung über custom.css ohne eine Template Änderung!


    Ein PHP-Programm wird in einem iframe-Wrapper dargestellt:


    http://aqua-neu.byethost7.com/index.php/ammoniak-1


    1) Wie lässt sich der Hintergrund in der Mobilansicht ganz ausblenden? (Auch ohne das Hintergrundbild wird immer noch der komplette Hintergrundrand angezeigt)
    2) Wie lassen sich die inneren Ränder des Containers in der Mobilansicht verringern ?

    Im direkt aufgerufenen PHP (ohne Joomla) sind die Ränder minimal:
    http://aqua-neu.byethost7.com/bin/Ammoniak.php


    Besten Dank im Voraus
    Martin

  • Zum hilfreichsten Beitrag springen

    Hi Christian,
    der erste Schritt ist getan. Der iframe Inhalt wird nach links geschoben.


    1) Leider wird die nutzbare Breite aber nicht vergrößert, da auch der rechte Rand mit verschoben wird.
    2) Wie sieht @media für "normale" Handys generell aus ?


    3) Lässt sich der Hintergrund generell verkleinern?


    Grüße
    Martin

    • Hilfreich

    Hallo Martin,


    was weiß ich, was "normale" Handys sind - bin darin nicht so fit & mit media queries noch weniger :)


    Hab halt folgendes ausprobiert, schaut temporär zumindest OK aus. Nicht auf dem Handy, sondern mit: Strg + Shift + M.


    zuerst versucht a)


    Code
    @media only screen and (max-width:767px) {.container {width:100%;}}


    da sah man aber noch den linken Hintergrund, daher Versuch b)


    Code
    @media only screen and (max-width:767px) {
body.site {
width:100%;
padding-left:0px;
}
}


    Über Nebenwirkungen etc. frage lieber Experten.


    Liebe Grüße, Christine

    Guten Morgen!


    mein Ziel ist das gleiche wie Martins, allerdings für "normalen Text" - auch hier habe ich mit Protostar auf dem Smartphone zu große Ränder, was die Lesefreundlichkeit verschlechtert.


    Ich habe auf impf-info.de über eine user.css Christines Vorschläge eingebaut und eigenmächtig erweitert


    - dadurch ist der rechte Rand auch brav verschwunden in der Mobildarstellung, links ist allerdings immer noch zuviel Rand für meinen Geschmack - wie bekomme ich den weg?


    Herzlichen Dank für Eure Hilfe,

    herzlichen Gruß,


    Steffen

    Geht mal in die Richtung und setze folgendes in die geschweifte Media-Only Klammer. Den Padding-Wert kannst du dann noch auf Wunsch hin anpassen, dann korrespondierend auch den 40px in calc natürlich.

    CSS
    .container {

    padding: 20px !important;
    width: calc(100% - 40px);

}

    Lösche das hier alles raus:



    und füge stattdessen einfach nur das hier ein:

    Code
    body.site {
padding:20px 0;
}

    Guten Morgen!


    Herzlichen Dank an Euch Drei für Eure Hilfe!


    Letztendlich gelöst hat das Problem in meinem Sinne dieser Einschub:


    Wieder einmal: ohne dieses wunderbare Forum wären Nebenerwerbs-Nerds wie ich völlig aufgeschmissen!


    DANKE!


    Schönen Sonntag,

    herzlich,


    Steffen

    Rabendoktor :

    Zukünftig bitte keine Threads kappern sondern eigenen Thread erstellen. Siehe auch:


    Zitat von Das Forenteam

    Neue Fragen, vor allem, wenn diese nicht vom Threadersteller kommen, nicht in schon bestehende Threads posten (Kapern eines Threads), sondern einen neuen eigenen Thread eröffnen.

    aus:

    Forenregeln

    Nun - ich habe das sehr wohl überlegt - aber mein neuer thread hätte halt exakt die gleiche Überschrift (und letztendlich ja auch Frage) gehabt - daher hielt ich es für legitim... ich sah und sehe das nicht als "kapern", sondern allenfalls aus nochmal neu aufgreifen und etwas erweitern....


    Wenn das "kapern" aber "eng" (nicht wertend!) gemeint ist, mache ich das beim nächsten mal anders.


    Herzlich,


    Steffen

    Rabendoktor


    Tut mir leid, aber dein Problem ist nicht gelöst. Man muss seitlich scrollen, um tatsächlich die ganze Breite deiner Seite zu sehen. Je nachdem, in welche Richtung man scrollt, wird immer noch links oder rechts ein Teil der Seite abgeschnitten.


    Screenshot 1:



    Screenshot 2:



    Warum hast du es mit meinem Tipp aus Post #13 nicht versucht? Ich weiss, das ist im Vergleich zu den anderen sehr unspektakulär, aber es funktioniert.

    Guten Morgen, Anka,


    ich muss mich bei Dir entschuldigen - ich hatte gestern (natürlich!) Deinen Vorschlag ausprobiert und er hatte gestern definitiv nicht den gewünschten Effekt; sehr mysteriös...


    Heute früh funzt das und Du hast Recht - Deine (erfreulich schlichte) Lösung funzt auch auf meinem Smartphone (da sah aber auch die bisherige Lösung besser aus, als auf Deinen screenshots...).


    Von Herzen Dank für Dein nochmaliges Nachfassen - ich bin sehr dankbar für die Hilfe hier aus dem Forum!


    Herzlich,


    Steffen