iFrame mit unterschiedlicher Höhe am Smartphone und Desktop

  • Gelöst bios2000one

    (@bios2000one)


    vor 7 Monaten, 1 Woche

    Hallo, ich habe bei mir auf der Webseite ein iFrame per HTML-Block eingebunden. Die Ansicht am Smartphone ist ok, aber am Desktop finde ich die Höhe etwas zu wenig. Nun würde ich es gern am Desktop etwas höher anzeigen lassen, ohne dass es am Smartphone auch höher wird. Wie kann ich das am besten bewerkstelligen? Meine Anpassungen haben sich bisher am Desktop sowie am Smartphone ausgewirkt.

    Vielen Dank und Grüße

    <iframe src="https://beispiel.de" title="Polycam capture viewer" style="height:100%;width:100%;max-height:720px;max-width:1280px;min-height:380px;min-width:280px" frameborder="0"></iframe>
Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    vor 7 Monaten, 1 Woche

    Hallo,
    gruppiere (Gruppe Block) den HTML-Block und trage bei der Gruppe bei den Eigenschaften unter „erweitert“ > Zusätzliches CSS „embed_frame“ ein (die Bezeichnung kannst du natürlich auch anders wählen).
    Dann füge bitte die folgende CSS-Regel (Media Query) unter Design > Customizer > Zusätzliches CSS ein:

    @media screen and (max-width: 599px) {
 div.embed_frame {
    height: 10rem;
}
}

    Die Höhe (10rem) und den Breakpoint (599px) kannst du ja noch nach Belieben ändern.

    Viele Grüße
    Hans-Gerd

    Thread-Starter bios2000one

    (@bios2000one)

    vor 7 Monaten, 1 Woche

    Erst mal danke, ich habe es jetzt wie folgt angepasst.

    @media screen and (min-width: 720px) {
     div.embed_frame {
        height: 10rem;
    }
    }

    Das wäre ja richtig, wenn ich möchte, dass ab einer Bildschirmgröße von 720 px die größere Darstellung greift, oder? Allerdings rutscht mir so das iFrame in ein anderes Objekt. Siehe Bild

    PS: Ich habe es jetzt mit einem festen Wert von 600px probiert und damit wird es angezeigt. Den Breakpoint habe ich auf 1280 gesetzt.

    • Diese Antwort wurde vor 7 Monaten, 1 Woche von bios2000one geändert.
    Moderator threadi

    (@threadi)

    vor 7 Monaten, 1 Woche

    Dein „PS“ verstehe ich so, dass so das du es gelöst hast? Wenn es eine Überlappung mit etwas anderem gibt, kann man ohne Link zur Seite nur schwer helfen. Das könnte vielerlei Gründe haben.

    Thread-Starter bios2000one

    (@bios2000one)

    vor 7 Monaten, 1 Woche

    Wenn es technisch richtig ist, wäre es gelöst, war mir aber nicht sicher. Aber gegen eine feste Größe ist nichts einzuwenden?

    Moderator threadi

    (@threadi)

    vor 7 Monaten, 1 Woche

    iframes brauchen eigentlich immer eine feste Größe für die Ausgabe. Klar kann man die per CSS anpassen. Aber dynamisch je nach Inhalt ist nicht sinnvoll machbar (nur per JavaScript).

    Thread-Starter bios2000one

    (@bios2000one)

    vor 7 Monaten, 1 Woche

    OK super, dann passt das ja so. Besten Dank und als gelöst markiert.

    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 7 Monaten, 1 Woche

    Mit einem Link zur Seite könnten wir vielleicht noch etwas „Feintuning“ anbieten. Aber wenn es so passt, ist es ja gut.
    Danke für die Rückmeldung und „Gelöst“-Markieren.

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)

Das Thema „iFrame mit unterschiedlicher Höhe am Smartphone und Desktop“ ist für neue Antworten geschlossen.