Problem mit Helix 3 - Sticky Header & Logo auf Handy/Tablet

  • Hallo an alle Nutzer bei Joomla.de!! :)


    Ich bin kein großartiger Website Experte und habe ein Problem mit dem Template Helix 3.

    Folgendes Problem:


    Wenn ich meine Website auf dem Handy zb. aufrufe und in das Querformat wechsle, dann ist der sticky-header zu klein. Sprich, er passt sich nicht an die gewechselte Breite an.


    Wenn ich nun im Querformat die Seite am Handy neu lade, passt sich der Header an, aber das Logo ist viel zu groß und geht unter die Linie darüber hinaus.


    Gibt es hier irgendjemanden der mir weiterhelfen kann? Vielleicht mit einem simplen custom-css oder java code den ich im Helix 3 Framework im Admin-Bereich einfach einfügen kann?


    Wäre dafür wirklich sehr dankbar. :thumbup:


    ps. die Website mit dem Problem lautet: http://www.computercheck.cc (damit ihr das selber nachstellen könnt)

  • Hast du im template verschiedene Logos für die unterschiedlichen Auflösungen hinterlegt? Ich bin mir nicht sicher, ob es bei deinem genutzten Template mit Helix3-Framework auch hochgeladen werden muss. Das Logo ändert sich ab 767px, das ist dann Tablet größe. Ich habe mal zwei Screenshots gemacht die Fenstergröße unterscheidet sich um 2px ...

         

  • java code den ich im Helix 3 Framework im Admin-Bereich einfach einfügen kann?

    Du meinst vermutlich Javascript - was absolut nichts mit Java zu tun hat. Darauf bitte achten und einfach mal bei Wikipedia den Unterschied anschauen ;)

    Viel mir so auf. Ist nicht wichtig bei deinem Problem, sollte aber dennoch nicht unerwähnt sein ;)



    Axel

  • Hast du im template verschiedene Logos für die unterschiedlichen Auflösungen hinterlegt? Ich bin mir nicht sicher, ob es bei deinem genutzten Template mit Helix3-Framework auch hochgeladen werden muss. Das Logo ändert sich ab 767px, das ist dann Tablet größe. Ich habe mal zwei Screenshots gemacht die Fenstergröße unterscheidet sich um 2px ...

         


    Hallo Abraxas,


    ja das Logo muss ich zb. für "mobile" (handy/tablet) extra hinterlegen. du hast das Problem schon richtig mit deinen Screenshots festgehalten, ich verstehe nicht, war um das dann größer wird?! Was kann ich da machen? Wenn ich das Logo in einer winzigen Auflösung rauflade dann bleibt es zwar klein, aber ist halt extrem unscharf und nicht mehr schön.. Weis da nicht mehr weiter. Kannst du mir vielleicht helfen? In Helix kann ich ja einen custom-css code einfügen, geht es damit / könntest du mir so einen schicken? (will nur das das logo klein bleibt)


    Ach ja und eben das Problem mit dem Sticky header: der ist bei mir am handy nur die hälfte wenn man in das querformat wechselt. wenn ich dann die Seite neu lade ist der Header 100% der Bildschirmbreite, aber dann das Logo eben zu groß.


    *hab zwei Screenshots angehängt mit dem Problem wie ich es hier geschrieben habe.

    Für Hilfe bin ich sehr dankbar.

  • was mir gerade auffällt (habe ich nicht drauf geachtet), dass du dieselbe Grafik für Mobile und PC benutzt. Ich habe die Grafik mal heruntergeladen. Die Auflösung von der Grafik sind knapp 1000px/Zoll. Ich hänge dir mal die Grafik in Klein(er) an. Nimm die als Mobile Logo und teste nochmal. Wenn das nicht funktioniert, dann schauen wir weiter.

  • was mir gerade auffällt (habe ich nicht drauf geachtet), dass du dieselbe Grafik für Mobile und PC benutzt. Ich habe die Grafik mal heruntergeladen. Die Auflösung von der Grafik sind knapp 1000px/Zoll. Ich hänge dir mal die Grafik in Klein(er) an. Nimm die als Mobile Logo und teste nochmal. Wenn das nicht funktioniert, dann schauen wir weiter.

    AbRaXaS wenn ich die Grafik so klein runterskaliere wie du jetzt oder eben deine nehmen würde, die ist dann nichtmehr scharf, das kann ich so nicht nehmen.. gibt's nicht die möglichkeit das die website einfach mit einem css code die grafik "runterskaliert" lässt und einfach nicht größer macht?

  • AbRaXaS hat die kleine Grafik nur für schmale Displays vorgeschlagen. Bietet dein Template dir die Möglichkeit für unterschiedliche Bildschirmbreiten verschiedene Bilddateien einzusetzten?

    Hallo astrid, für unterschiedliche Bildschirmbreiten nicht. Ich kann einfach nur drei "Größen" uploaden, sprich für "desktop", "mobile" und "Retina" gibt's einen Uploadpunkt. Das Logo aber so klein zu ziehen von der Auflösung her ist keine Lösung da es dann verschwommen ist.. Es sollte schon runterskalieren so wie es jetzt ist, nur eben nicht zu groß werden und über den header hinaus gehen. Was kann ich da sonst noch machen?

  • Hab das Problem selber lösen können indem ich mit custom-css code dem logo eine fixe breite gebe:


    #sp-header .logo {

    width: 230px;

    margin: 0px 0px 0px 0px;}


    wenn mir noch wer helfen kann, dass der sticky header immer 100% der bildschirmbreite annimmt (zb. bei wechsel von horizontal zu vertikal am handy) dann bin ich dankbar.


    Lg

  • das mag mit Mobile (also Handy) funktionieren, aber wenn du mal den Browser auf unterschiedliche Größen änderst, hast du bei einer mittleren Browsergröße das Logo in der einen Zeile und in der nächsten Zeile die Navigation. Wenn es dich nicht stört OK, aber dein Sticky-Header hat auch damit zu tun.

    Hast du schon die drei unterschiedlichen Grafiken ausprobiert? Unterschiedlich heißt aber in der Größe unterschiedlich, nicht in der Auflösung. also bspw. 230x79px mit 72 dpi Auflösung für Desktop, 180x62px für Retina displays und 120x41px für Mobile? Und deine .logo-Änderung rausnehmen?!?