Manche Seiten nicht für Anzeige auf kleinen Bildschirmen optimiert

ACG Sommerfest 2024
Sei dabei beim ACG Sommerfest 2024! diesmal ganz wirklich - okay?!
Klick mich für mehr Informationen.

    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:

  • Da loco

    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


    6bbce21df75b4c39152244ab432f7667.png


    animecomde.png

    Gefällt mir 1

    Kennst du dich da aus?

    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


    6bbce21df75b4c39152244ab432f7667.png


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

    Gefällt mir 2 Danke 1

    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


    6bbce21df75b4c39152244ab432f7667.png


    animecomde.png

    Gefällt mir 5

    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-german…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

    Hat das Thema geschlossen.