1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Responsiv Anpassung WP-Theme Customizr

Dieses Thema im Forum "Konfiguration" wurde erstellt von admindirektor, 4. September 2017.

Schlagworte:
  1. admindirektor

    admindirektor Well-Known Member

    Registriert seit:
    24. Januar 2014
    Beiträge:
    56
    Zustimmungen:
    1
    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
     
  2. Edi

    Edi Well-Known Member

    Registriert seit:
    26. Juli 2006
    Beiträge:
    3.728
    Zustimmungen:
    1
    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:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    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.
     
  3. admindirektor

    admindirektor Well-Known Member

    Registriert seit:
    24. Januar 2014
    Beiträge:
    56
    Zustimmungen:
    1
    Hallo

    Danke für die schnelle Reaktion und die Kritik.
    Was würdest Du vorschlagen das die Ansicht tatsächlich automatisch angepasst wird.

    Qualität der Bilder kann ich verbessern, das ist im Moment das kleinere Übel.

    Danke nochmals
    Thomas
     
  4. pixselig

    pixselig Well-Known Member

    Registriert seit:
    8. Mai 2012
    Beiträge:
    2.301
    Zustimmungen:
    10
    Hallo Thomas!

    Dafür ist das JavaScript des Sliders verantwortlich, das gibt den einzelnen Slider-Images bei kleinerer Viewport-Breite zBsp folgendes mit:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!


    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:
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  5. admindirektor

    admindirektor Well-Known Member

    Registriert seit:
    24. Januar 2014
    Beiträge:
    56
    Zustimmungen:
    1
    Hallo Pixselig,

    Verstehe ich das richtig?
    Den anderen Codes raus und deinen dafür rein oder soll mein Code drin bleiben?

    Danke schonmal für die Hilfe.
     
  6. pixselig

    pixselig Well-Known Member

    Registriert seit:
    8. Mai 2012
    Beiträge:
    2.301
    Zustimmungen:
    10
    Lass mal deinen drin.
     
  7. admindirektor

    admindirektor Well-Known Member

    Registriert seit:
    24. Januar 2014
    Beiträge:
    56
    Zustimmungen:
    1
    Danke für die Tipps.
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden