Joomla Noob - Responsive Probleme

    Hello people,

    ich bin Web-Anfänger (Mediengestalterin Azubi ende 3. LJ (spezialisierung Print ^^)) und soll nun teilweise die Bearbeitung einer stehenden Website übernehmen.
    Ich habe schonmal unter Anleitung in Joomla gearbeitet und kenne die Basics der back-end & front-end pflege sowie Coding (HTML & CSS).

    Zum gestalten des Frontends nutze ich YooTheme und den dazugehörigen "Builder"

    Mein größtes Problem gerade ist eine Slideshow die als Header auf der landing dient
    und das im Zusammenhang mit responsive, denn an sich sieht alles halbwegs gut aus bis auf die mobile Ansicht.

    ich habe gerade was von SourceSets gelesen also dem html tag srcset=" "
    soweit so gut, nun weiß ich allerdings nicht wie ich an die html sheets komme und dann welches das richtige ist.

    Ich würde sehr ungern die ganze Seite zerschießen wenn was schief geht.

    Bitte helft mir, ich bin für alle Tips, Tricks und Kniffe offen.

    So ganz pauschal kann man dir da nichts raten und ich vermute, dass auch ein Link zum Problem wenig hilft.

    scrset bezieht sich auf das Laden von Bildern auf mobilen Retina-Displays. Ich weiß nicht, ob die verwendete Erweiterung / der Slider srcset überhaupt unterstützt. Wenn nicht, würde ich dir raten, die Finger von dieser Lösung zu lassen, gerade als Anfänger.

    Um Bilder weniger verpixelt und an Details reicher auf mobilen Geräten darzustellen, könntest du die Bilder einfach mindestens doppelt so groß machen, wie es die mobilen Geräte anzeigen. Die Browser sollten dann eine akzeptable herunterskalierte Version des Bildes anzeigen. Oder ist das Bild bereits größer und du bist damit nicht zufrieden? Prüfe mal die Bildgrößen.

    Falls der Slider oder etwas anderes aber die Bilder zu klein gemacht und Thumbnails der hochgeladenen Ursprungsbilder erzeugt hat, wäre es sinnvoll, diese Option zu deaktivieren oder die Bilder zu ersetzen. Das Argument, dass die Seite durch vernünftig komprimierte Bilder zu langsam wird, gilt fast nicht mehr.

    Mach wenn es nicht zu viele slider sind doch einfach 2 Versionen mit verschiedenen Größen bei Bilder und Schrift und dann kannst das über die Einstellung des slider sagen... Diesen nur bis tablet anzeigen und den anderen an Bildschirmgröße tablet.

    Moin

    Bei YOOtheme musst Du nicht manuell in den Code eingreifen, wenn Du den Builder verwendest wird die Mobile-Version automatisch passend bereitgestellt. Das betrifft natürlich auch den integrierten Slider. Unterschiedliche Versionen sind dort ausdrücklich NICHT notwendig. Mit einem Link zum Problem kann man sicher mehr sagen.

    Gruß Jan

    Hey und danke für die Antwort,

    na klar, hier die Seite um die es geht: https://draufunddran.net/

    wie beschrieben die beiden slider im header.

    und danke für die info zu yootheme, gut zu wissen, löst aber noch nicht mein Problem.

    ich hab gestern schon mal probiert im css editor mit
    img tag
    width: 100%
    height: auto probiert.
    Hat er auch genommen aber nicht die höhe skaliert sondern den gesamten content auf die viewport breite gequetscht, also das Bild mega gestaucht.
    Dachte mir schon, dass evtl. eine Einstellung das blockiert.

    Mit der Auflösung sollte ich keine Probleme bekommen es ist eigentlich für Mobil groß genug, denke ich.
    Ich habe eher das Problem, dass es um eine Anzeige geht wobei ich keinen anderen Bildausschnitt zulassen kann,
    der Builder aber die Bilder immer größer skaliert und weniger anzeigt je kleiner das Display wird.

    Ziemlich wahrscheinlich habe ich einfach völlig falsche einstellungen. -.-
    Mölicherweise lege ich auch einfach das Bild falsch an???

    Ich hab gerade nochmal dran rum gefummelt. Es ist von den Skalierungen her jetzt halbwegs okay, nur der Text spielt jetzt (und auch vorher) nicht mit.
    Mir passt eigentlich alles halbwegs, außer die mobile Ansicht.

    Ich weiß leider nicht wie ich, wie Loschdi erwähnt hatte, 2 Versionen machen kann.

    Hey again,

    ich hab mich mal an den overlays probiert...

    grundsätzlich hat das geklappt, nur die paddings irritieren mich. Wie bekomme ich die weg?

    So soll es eigentlich aussehen:


    Ich habe über den Inspektor die CSS-Stellen gefunden und Sie ausgeschaltet - so komm ich zu dem screenshot.

    Das scheinen aber Slider einstellungen zu sein die ich mit css nicht "einfach so" überschreiben kann.

    So sieht es nämlich im Builder aus:

    Hier die Codes

    Code
    .el-overlay {
  padding-top: 5%;
  width: 100%;
  height: 30%;
  background-color: rgba(0,0,0,0.75);
 }

    auch diese padding-top Geschichte is nur die halbe Wahrheit. Ich möchte damit einfach nur den Text vertikal zentriert haben aber weder "position: center" noch "align(-content): center/middle" hat was gebracht.

    auf unterschiedlichen viewports siehts immernoch doof aus hmmfie

    Einstellungen gibt es ja grundsätzlich an 2 Stellen

    1. Section (neben dem Namen der Section)

    2. im Element welches Du ausgewählt hast

    3. am Element selber (rechts - am Element)

    Ich habe schon gut 120 Seiten mit dem Page-Builder von Yootheme gebaut. Ich kann mich nicht daran erinnern, eine Einstellung ausserhalb dieser Einstellungsmöglichkeiten vorgenommen zu haben - gerade was Abstände betrifft.