Probleme mit Darstellung auf mobilen Geräten

  • Joomla Version
    4.3.2
    PHP Version
    PHP 8.0.x
    Hoster
    world4you.com
    Link (URL) zur Seite mit dem Problem
    www.siskov-music.com

    Hallo zusammen!

    Endlich habe ich meine Website mit Joomla 4 komplett neu gemacht und online gestellt! Es ist eine einfache Musiker-Website und ich bin mit dem Ergebnis zufrieden - zumindest wie es am Desktop-PC aussieht. Auf Tablet und Smartphone fließen Texte und Elemente teilweise rechts aus dem Bild, teilweise passt es.


    Meine Website ist für Desktops gedacht - auf mobilen Geräten sollte die Darstellung geringen Ansprüchen genügen; zumindest sollte man aber die Texte lesen können.

    Nun suche ich schon den ganzen Tag nach Lösungen, Tutorials oder Workarounds zum Problem - werde aber einfach nicht fündig (bin ich zu blöd zum Googeln?).


    Ich wäre also sehr dankbar über ein paar Tipps oder Links zu Tutorials für technisch versierte Laien wie mich, nur um die Darstellung auf mobilen Geräten ein wenig anpassen zu können ohne gleich zahllose, frustrierende Nächte vor dem Computer sitzen zu müssen.

    Vielen Dank!!!


    Template: https://galussothemes.com/item/gt-coffee-joomla-template/

  • Verwende keine absoluten pixelzahlen für die Breite oder Höhe von Elementen, eigentlich für gar nichts ;)


    Hast du die Tabellen in den Texten selbst eingefügt?
    Die machen das Problem. Verwende statt Tabellen lieber Flex

    Es gibt sehr nette tutorials zu flex - https://css-tricks.com/snippets/css/a-guide-to-flexbox/


    Ungefähr so


    <div class="d-flex ">

    <div class="col-sm-12 col-md-3">

    ... hier das foto ..

    <div>

    <div class="col-sm-12 col-md-9">

    .... hier der Text ...

    </div>

    <div>

  • Danke für die rasche Antwort!

    Das Problem liegt also in den vielen Table-Tags und den absoluten Größen, wenn ich das richtig verstanden hab.

    Ich arbeite mit denen schon lange weil sich die Elemente so gut gliedern lassen, besser als mit div-Boxen.

    Mit Flex über CSS klappt das aber auch? Super! Hab ich noch nie davon gehört!


    na, dann hab ich mal was zum Durcharbeiten!
    Danke für Tipps und Link!!!

  • Meine Website ist für Desktops gedacht - auf mobilen Geräten sollte die Darstellung geringen Ansprüchen genügen; zumindest sollte man aber die Texte lesen können.

    Bedenke aber, es gilt: Mobile First

    Es sei denn, dir ist das Ranking in den Suchmaschinen nicht weiter wichtig.