Desktop Ansicht vs. mobile Ansicht

WolfgangD · 14. November 2020

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

Elwood · 14. November 2020

Hallo Wolfgang,

das mobile Logo kannst du ja extra in den Template-Optionen auswählen:

Die Originalgröße vom Shaper-Logo ist diese:

Und die mobile Schriftgröße kannst du auch in den Template-Optionen anpassen:

WolfgangD · 14. November 2020

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.

Re:Later · 14. November 2020

Zitat von WolfgangD

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.

WolfgangD · 14. November 2020

Re:Later Danke für den Hinweis - werde jetzt versuchen beide Probleme über MediaQueries zu lösen und werde dann über die Erfolge/Misserfolge berichten.

christine2 · 14. November 2020

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

WolfgangD · 14. November 2020

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

Habe das jetzt so gelöst

CSS

.wd_deli_1{
    text-align: center;
    font-family: Delimax; 
    font-size: 24pt;
}
.wd_deli_2{
    text-align: left;
    font-family: Delimax; 
    font-size: 24pt;
    color: #c50202;
}
.wd_deli_3{
    text-align: right;
    font-family: Delimax; 
    font-size: 24pt;
    color: #c50202;
}
@media (max-width: 900px) {
    .logo-image {
        height: 105px !important;
        }
    .logo-image-phone{
        height: 105px !important;    
        }
    .wd_deli_1{
        text-align: center;
        font-family: Delimax; 
        font-size: 18pt;
        }
    .wd_deli_2{
        text-align: left;
        font-family: Delimax; 
        font-size: 18pt;
        color: #c50202;
        }
    .wd_deli_3{
        text-align: right;
        font-family: Delimax; 
        font-size: 18pt;
        color: #c50202;
        }
    }

Alles anzeigen