Manche Seiten nicht für Anzeige auf kleinen Bildschirmen optimiert

Community Update 6
Die Community hat überlebt und erstrahlt in neuem Glanz. Mehr Informationen
Solltest du Fehler finden, verwende bitte den Feedback und Hilfe Bereich.

    Hallo, ich habe wieder etwas kleines gefunden! :eo-bird:

    Mir ist das vor einiger Zeit schon mal aufgefallen, aber gerade heute bei der Geschenkesuche wieder: Ein bis zwei Seiten sind nicht wirklich für die Anzeige auf kleinen Bildschirmen optimiert. Der Inhalt der Partner-Seite ist so gut wie gar nicht responsive und die ACG+ Seite bricht unten recht unschön:

    d0RfcuQ.png  P82VrBX.png

    Ist nichts wildes und die einzigen Seiten, bei denen mir da irgendwas aufgefallen ist. Aber falls euer Praktikant mal keine Arbeit haben sollte, könnt ihr euch das ja mal anschauen, falls euch das nicht eh schon bekannt (oder egal) ist :heyho:

    The world is indeed comic, but the joke is on mankind.

  • Da loco 20. Dezember 2021 um 17:03

    Hat das Label In Prüfung hinzugefügt.
    Zitat von Aerishi

    Der Inhalt der Partner-Seite ist so gut wie gar nicht responsive

    Ja, den Inhalt der Seite habe ich per HTML erstellt, ich bin aber ein Noob was Responsiveability angeht ^^

    Ich gucke mir das noch mal an... :rice-shame:

    Edit: Ah, ich weiß auch wieder warum, wenn ich den Editor verwende, wird auch das CSS des Styles eingebunden und die Tabellen hatten einen "Border".

    Ich denke ich muss das mal komplett umbauen... :rice-crying:

    Bei ACG+ und dem Marktplatz kann aber nur Keito was ausrichten, wenn ich da dran rumspiele ist die Website nachher kaputt :pepemeltdown:

    Hey now, hey now, hear what I say now ~ Happiness is just around the corner ~ Hey now, hey now, hear what I say now ~ We'll be there for you

    animecomde.png

    Da loco Bei Fragen zu Media-queries und responsive zeugs stehe ich zur Verfügung..

    Edit: Ich schau mir das grad schon mal mit den devtools an..

    Edit2: Sieht so aus, als würde es reichen, die Bilder in der rechten Spalte auf width 100% zu setzen.

    Edit3: ich sehe, darauf bist du selber gekommen :D

    Thou shalt not follow the NULL pointer, for chaos and madness await thee at its end.

    (aus: "The Ten Commandments for C Programmers" von Henry Spencer)

    3 Mal editiert, zuletzt von Eclipse (20. Dezember 2021 um 17:41)

    Hu Ha! Ich habe die Partner-Seite responsive gemacht! Ohne alles kaputt zu machen! :muha:

    War in der Tat nur der kleine Zusatz style="width: 700px; max-width: 80%;" beim Image-Tag notwendig.

    Ich will dabei betonen, ich mache sowas nicht beruflich ^^ Hab nur Basic Skills ö.ö

    Hey now, hey now, hear what I say now ~ Happiness is just around the corner ~ Hey now, hey now, hear what I say now ~ We'll be there for you

    animecomde.png

    Auf meinem Tablet schlubst die Werbung manchmal nach oben und ich komme gar nicht mehr ins Menü. Ich hatte eh das Gefühl, dass die Seite für Tablet noch weniger optimiert ist als fürs Handy. Ist jetzt klagen auf hohem Niveau - dachte nur, ich erwähne es zumindest mal. :eo-sne:

    Ich hätte einen Vorschlag basierend auf CSS-Grid von Aerishi. Ich lade eine Prototyp-HTML als Txt hoch, ich hoffe das ist ok.

    Zum Laufen lassen müsst ihr entweder:

    Option 1: Direkt im Browser

    1. Kopiert den Inhalt der Txt

    2. Öffnet Dev-Tools auf der Partnerseite und geht zum Tab "Elements"

    3. Rechts-Klick auf den <html>-Tag und dann "edit as html"

    4. Ersetzt den kompletten Inhalt mit der TXT-Datei.

    5. Klickt irgendwo in das Code-Fenster, sodass der Inhalt verwendet wird (bisschen tricky)

    Option 2: Lokal:

    1. Ladet Txt runter

    2. Ändert die Endung zu HTML

    3. Ladet euch den Standartstyle der Partnerseite runter: https://anime-community-germany.de/style/style-15.css?m=1639949857

    4. Plaziert die HTML und die CSS-Style Datei im selben Ordner und öffnet die HTML-Datei mit einem Browser

    Ich habe im HTML nur die ersten beiden Partner hinzugefügt, aber das Prinzip kann für alle Partner benutzt werden. Es sollte damit responsiv, auch auf einem Galaxy Fold nutzen.

    Bei Interesse kann ich auch noch Details zu der verwendeten Lösung posten. Muss aber jetzt los...

    PS: Bin auch kein Profi, also kein Gewähr, das es die "richtige" Lösung ist

    Das WSC (die grundlegende Software der Community) hat bereits ein Grid-Layout implementiert. Das sieht dann ungefähr so aus:

    HTML
    <div class="row rowColGap formGrid">
    <div class="col-xs-12 col-md-6">
        fancy text
    </div>
    
    <div class="col-xs-6 col-md-4">
        mooooaaar text
    </div>
</div>

    Wobei col-xs-12 auf kleinen Bildschirmen die ganze Zeile "reserviert" und mit col-md-6 nur 50% auf großen Bildschirmen.

    Ich werde demnächst mal nachsehen, ob sich das lohnt. :D

  • Q 21. Februar 2022 um 15:00

    Hat das Thema geschlossen.