Desktop Ansicht vs. mobile Ansicht

  • Hallo Leute!

    Es geht um die Seite - läuft unter Joomla 3.9.22 mit dem Template Helix Ultimate.

    Die Startseite sieht am Computer so aus

    Über die Optik kann man streiten - war aber vom Kunden so gewünscht.


    In der mobilen Ansicht sieht das aber so aus

    Für mich eigentlich nicht tragbar

    - das mobile Logo ist viel zu groß

    - Der rote Einleitungstext ist viel zu groß und erschlägt einen


    Jetzt habe ich 2 Ideen.

    1. Als mobiles Logo ein kleineres Logo verwenden

    - funktioniert aber nicht, weil die Logo-Höhe in dem Template die gleiche ist - in diesem Fall 210px

    ? mit welchen Einstellungen/Änderungen kann ich die Höhe des mobilen Logos verkleinern


    2. In der mobilen Version einen anderen Beitrag verwenden in dem die Schriftgröße verringert wird

    ? wie bringe ich das hin


    Danke für Eure Hilfe


    Wolfgang

  • Hallo Elwood!


    Ich kann zwar ein mobiles Logo einstellen - habe ich auch schon versucht - die Logo Höhe bleibt im mobilen Bereich allerdings die gleiche wie in der Desktop Version.

    Das kleinere Logo mit 105px wird dann bei mir auf 210px von der Desktop Version vergrößert.


    Das Ändern von H1 und H2 für die mobile Version hilft mir nichts weil die beiden Texte zwar H1 und H2 sind aber von der Schriftart und Schriftgröße im Beitrag manuell überschrieben werden.

  • aber von der ... und Schriftgröße im Beitrag manuell überschrieben werden.

    Das genau ist der Fehler, den Viele machen. Das ist in responsiven Zeiten absolutes No-Go. Verwende eine CSS-Klasse, statt Inline-Stilen! Die kannst du dann per CSS-Datei mit MediaQueries responsiv steuern.


    Das Selbe gilt für Bilder, Tabellen u.a. Macht man einfach nicht mehr mit fixen Breiten.

  • Hallo,


    glaube zu sehen, dass die Höhe vom Logo fix als Inline segment drinnen ist:

    Code
    <style type="text/css"> .......... usw.
    .logo-image{height:210px}.logo-image-phone{height:210px}

    Dadurch wirkt wohl das hier nicht:

    Code
    img {
    display: block;
    max-width: 100%;
    height: auto;
    }

    also die: height: auto;


    Liebe Grüße

    Christine

  • christine2 Diese 210px kommen von der Einstellung im Template - allerdings kann ich nur 1x die 210px angeben


    Habe das jetzt so gelöst

    Einmal editiert, zuletzt von Indigo66 () aus folgendem Grund: Ein Beitrag von WolfgangD mit diesem Beitrag zusammengefügt.