Breite des Fensters beim Reservierungs-Popup ändern

vogel-hemer

Hallo zusammen,

ich möchte gerne die Breite des Fenster, welches sich durch drücken des Reservierungs-Popup öffnet, ändern. Aktuell ist

Code

max-width: calc(100% - 20px)

als Breite eingestellt. Durch eine Angabe in den allgemeinen CSS-Einstellungen lässt sich die Breite leider nicht ändern (siehe Bilder).

Vielen Dank für die Hilfe!

Stefan S

Unter welcher Adresse und an welcher Position auf der Seite kann ich das Popup sehen?

vogel-hemer

Sie können das Popup auf http://www.vogel-hemer.de in der unteren rechten Ecke finden. Auf mobilen Geräten bzw schmalem Bildschirm ist es bewusst nicht sichtbar.

Stefan S

Dieses Popup öffnet sich bereits auf 100% der Breite des Inhaltsbereichs (ungefähr so Breit, wie Ihr Headerbild). Breiter geht nicht und würde doch auch keinerlei Vorteile bieten.

vogel-hemer

Da liegt ein Missverständnis vor: unzwar möchte ich die Breite senken, welches ich über max-width versucht habe.

Am liebsten wäre mir eine Breite die (beim Desktop) zwischen 1/2 und 1/3 der Breite des Inhaltsbereichs liegt.

Stefan S

Hallo,

die Breite der Lightbox richtet sich nach der Breite des Artikels bzw. Texts, der in der Lightbox dargestellt werden soll. Die Breite dieses Artikels (der über die CSS-Klasse zpboba-fancypopup angesprochen wird) können Sie per CSS definieren. Um die Breite z.B. auf ⅓ der Fensterbreite zu setzen:

Klicken Sie im Menü Website auf "Einstellungen"
Klicken Sie auf CSS
Fügen Sie folgende Textzeilen (ohne Überschrift und ohne Zeilennummern – am besten über das Dokumente-Icon rechts oben im Quellcode-Kasten kopieren) in das Feld "CSS" ein und schließen Sie den Dialog dann mit Klick auf "OK"

<style>

.zpboba-fancypopup{

width: 30vw !important;

}

</style>

Anschließend müssen Sie evtl. Ihre Seiten neu erstellen (Erweitert > Erstellen > Alle Seiten erstellen) und ggf. veröffentlichen.

vogel-hemer

Vielen Dank, das funktioniert wunderbar!

Ich habe es jetzt noch für die Darstellung auf Tablets breiter eingestellt. Wie oben gesagt wird der Reservierungsbutton auf mobilen Geräten ausgeblendet. Hier einmal der Ausschnitt aus dem CSS, vielleicht ist das für jemanden von Nutzen...

CSS

/*Beginn Reservierungssbutton*/
  div.zpboba-fancypopup {
    width: 25vw !important;
  }
@media screen and (max-width: 900px) {
  div.zpboba-fancypopup {
    width: 60vw !important;
  }
}
@media screen and (max-width: 600px) {
  div.zpboba-button.bottomr {
    display: none;
  }
}
/*Ende Reservierungsbutton*/

Alles anzeigen

Breite des Fensters beim Reservierungs-Popup ändern

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?