Responsiv Anpassung WP-Theme Customizr

  • Hallo.

    Habe ein kleines Problem mit der Anpassung der Bilder für die Handyansicht im Hochformat für den Startseitenslider.

    Ich liebe das Customizr Themen, weil es alle Möglichkeiten bietet die ich brauche und es mit CSS super anpassbar ist.

    Nur mit der aktuellen Situation habe ich ein Problem wie oben beschrieben.

    Seite siehe hier: http://net-com.at/Start

    Der Slider passt sich an, trotzdem ich die Bilder im richtigen Format habe, werden diese immer noch abgeschnitten angezeigt. Dies nur im Hochformat beim. Handy. Egal ob nun bei Android oder beim iPhone. Nutze ich die Querversion im Handy funktioniert es, wie auch in allen Browsern, nur eben nicht im Hochformat.

    Habe folgenden CSS Code im Childtheme eingegeben:

    /* START OF Reduce the height of the Slider */
    Media (max-width: 1200px){
    #customizr-slider.carousel .item {
    height: 308px;
    min-height: 308px;
    line-height: 308px;
    }
    }
    Media (max-width: 979px){
    #customizr-slider.carousel .item {
    height: 247px;
    min-height: 247px;
    line-height: 247px;
    }
    }
    Media (max-width: 767px){
    #customizr-slider.carousel .item {
    height: 246px;
    min-height: 246px;
    line-height: 246px;
    }
    }

    Media (max-width: 480px){
    #customizr-slider.carousel .item {
    height: 152px;
    min-height: 152px;
    line-height: 152px;
    }
    }

    Media (max-width: 320px){
    #customizr-slider.carousel .item {
    height: 112px;
    min-height: 112px;
    line-height: 112px;
    }
    }
    /* END OF Reduce the height of the Slider */

    Hat vielleicht einer eine Idee woran das liegen könnte?

    Danke im voraus für die Hilfe.

    Thomas aus Wien

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Ein bisschen schwierig zu sagen, was da falsch läuft... Vor allem auch, weil das ganze CSS als Cache ausgeliefert wird. ;-)

    1) Der Slider funktioniert auch im Querformat nicht beim iPhone.

    2) Offensichtlich werden für iPhones andere Inhalte ausgeliefert als für Desktop-Browser (wenn damit das responsive Verhalten untersucht wird).

    3) Ich verstehe Dein CSS nicht, beispielsweise:

    Code
    #customizr-slider.carousel .item {
        height: 308px;
        min-height: 308px;
        line-height: 308px;
    }

    Wieso eine Höhe und eine minimale Höhe, die gleich gross sind? Und was soll der Wert für line-height bewirken?

    Zudem und vor allem: Normalerweise kann eine Höhe nur definiert werden, wenn auch eine Breite definiert ist.

    4) Die Slider-Bilder sind auf dem Desktop unscharf und damit wenig attraktiv.

  • Hallo Thomas!

    Dafür ist das JavaScript des Sliders verantwortlich, das gibt den einzelnen Slider-Images bei kleinerer Viewport-Breite zBsp folgendes mit:

    Code
    [FONT=Consolas]width: 100%;height: 190px;top: 0px;left: -28.5px;
    [/FONT]

    [FONT=Consolas]

    Wobei das "width: 100%;" zwar richtig wäre, aber von eine "width: auto !important;" überschrieben wird.
    Dazu ein "left: -28.5px;" (wobei das genau der Hälfte des Bildüberhanges entspricht) - und das Bild ist horizontal zwar zentriert aber eben rechts und links beschnitten.

    Du könntest folgendes versuchen:
    [/FONT]

    CSS
    #customizr-slider-main_slider .carousel-cell.item img {
    width: auto !important;
    left: 0 !important;
    }

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!