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

Responsive Design funktioniert, aber nicht auf dem Smartphone

Dieses Thema im Forum "Mobil mit WordPress" wurde erstellt von Andrea123, 15. Dezember 2015.

  1. Andrea123

    Andrea123 Member

    Registriert seit:
    23. November 2015
    Beiträge:
    7
    Zustimmungen:
    0
    Hallo ihr lieben Helferinnen und Helfer,

    kaum ist eine Herausforderung gemeistert, stehe ich schon vor einem anderen Problem...
    Bei vielem konnte ich mich mit meinem Amateur-Wissen durchbasteln, aber hier bin ich ratlos!

    Ich verwende für die Gestaltung einer nicht kommerziellen Seite ein Theme, dass eigentlich im Responsive Design bereit steht.
    Das funktioniert auch wunderbar - allerdings nur bis zu einer gewissen Größe des Displays. Bei einer Fenstergröße, wie es zum Beispiel das Smartphone hat, tut die Seite leider nicht das, was sie soll...

    Woran liegt das? Eventuell am eingebetteten Video?
    Das hier ist der Link zur Seite: www.rapid-cycle.de

    Ich möchte mir die (für meine Verhältnisse) mühevoll aufgebaute Seite nicht völlig zerstören und wäre sehr dankbar, wenn jemand einer blutigen Anfängerin ein wenig weiterhelfen könnte :)
     
  2. Trunk

    Trunk Well-Known Member

    Registriert seit:
    29. Oktober 2015
    Beiträge:
    104
    Zustimmungen:
    0
    Wenn das DIV (was den iframe für das Video enthält) clear:both; als CSS-Eigenschaft bekommt, sorgt das dafür, dass links und rechts daneben keine Elemente platziert werden, das Video rutscht also in eine eigene Zeile. Die regel muss also in den CSS Teil, der sich um die niedrige Seitenbreite kümmert, clear:none; in den CSS-Teil für größere Seitenbreiten.

    Wenn das im Responsive CSS festgelegt wird, sollte das Video nicht mehr halb aus der Webseite herausragen.
     
  3. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.004
    Zustimmungen:
    369
    Ich würde die Class one-half auf 100% breite setzen und dann ab einer bestimmten min-width die width auf 49%. Iframe würde ich ebenfall per CSS auf max-width:100% setzen.
     
  4. Andrea123

    Andrea123 Member

    Registriert seit:
    23. November 2015
    Beiträge:
    7
    Zustimmungen:
    0
    Vielen Dank schon mal für die Tipps...
    Ich habe clear:both zur div class hinzugefügt, aber es hat sich nichts getan.
    Wie sieht das ganze denn dann als Code aus? Die max-width ist auf 100% oder sehe ich das falsch?
    </div>
    <div class="one_half last">
    <div style="clear:both"></div>
    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;

    video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;

    <h4></h4>
    <iframe src="https://www.youtube.com/embed/uraaKNUOAdU" width="560" height="315" frameborder="0">iframe, object, embed {
    max-width: 100%;
    } </iframe>

    Müsste nach diesem Code meine div nicht div class="video-container" sein? Dann rutscht das Video zwar nach unten, aber auch in der normalen Ansicht auf dem PC.
     
  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