CSS @media Maximum Width überschreiben?
Guten Morgen,
mein Vater hat eine Website auf MyWebsite von IONOS. Er hat dort einen Buchungskalender, der unter 1025 Pixel Weite nicht angezeigt wird aufgrund folgenden CSS Codes;
@media screen and (min-device-width: 1024px) {
.mediumScreenDisabled { display:block }
.smallScreenDisabled { display:block }
}
@media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } }
@media screen and (max-device-width: 568px) { .smallScreenDisabled { display:none } }
@media screen and (min-width: 1024px) {
.mobilepreview .mediumScreenDisabled { display:block }
.mobilepreview .smallScreenDisabled { display:block }
}
@media screen and (max-width: 1024px) { .mobilepreview .mediumScreenDisabled { display:none } }
@media screen and (max-width: 568px) { .mobilepreview .smallScreenDisabled { display:none } }
Der @media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } } -Teil verhindert das Anzeigen des Kalenders und möchte deshalb die maximale width ändern.
Allerdings gibt es auf MyWebsite selbst wohl keine Option dazu und der IONOS Support meint, dass sie für Drittanbieter Snippets keinen Support anbieten (dabei bin ich mir ziemlich sicher, dass das von denen kommt, da der Kalender in einem iframe eingebunden ist).
Gibt es eine Möglichkeit über CSS die Eigenschaft separat nochmal zu überschreiben, wenn ich das Snippet von oben nicht manipulieren kann?
Danke und LG
3 Antworten
Wenn das ganze in einem IFRAME steckt und du keinen Einfluss auf den Inhalt hast, kannst du es auch nicht von außen überschreiben – zumindest ist mir keine Möglichkeit bekannt.
Wer stellt denn diesen Buchungskalender zur Verfügung? Wenn er von IONOS selbst kommt, wären sie auch dafür verantwortlich. Es kann aber sein, dass es eine Drittanbieter-Software ist, deren Funktion zwar IONOS zur Verfügung stellt, sie jedoch keinen Support dafür übernehmen.
Dann wäre die Frage, ob du eine eigene Instanz dieses Kalenders hast, bei dem du ggf. Änderungen an Template vornehmen kannst oder ob du nur den reinen Dienst nutzt. Kann ich dir aber alles nicht beantworten und das muss du selbst rausfinden.
Welche Seite ist denn jetzt nun von dir und was bindest du ein? Das Media-Query, welches den IFRAME für Mobile ausblendet, ist ja direkt in ferienwohnung-kribitz.de eingebunden. Wenn das deine Seite ist, dann ändere das doch einfach.
Ist das nicht deine Seite, dann binde doch den Kalender direkt von ferien-netzwerk.de ein. Der ist auf obiger Seite ja auch nur als IFRAME eingebunden und genauso kannst du es bei dir dann auch machen. Dann wird er bei dir auch angezeigt.
Die Ferienwohnung-Kribitz Seite ist meine. Bzw. die meines Vaters. Das Problem ist ja eben, dass wir die Media Query nicht ändern können. Deshalb schrieben wir IONOS an, die meinten, dass sie darauf keinen Einfluss hätten.
Es gab nämlich keine Option diesen zu ändern. Das ist ja, was mich so wundert. Die Query ist im Header der Website, nicht des Iframe. Ich habe keine Option dazu gefunden, dass ich es manipulieren könnte.
Die Ferienwohnung-Kribitz Seite ist meine. Bzw. die meines Vaters.
Dann schreib in deren Quelltest irgendwo
<style>
.mediumScreenDisabled {display:block}
</style>
bzw. lösche einfach die Zeile
<div class="mediumScreenDisabled">
Wie wurde denn die Webseite erstellt? Ist das irgendein Web-Baukasten von IONOS?
Wenn ja, dann schau mal in den Einstellungen zu dem IFRAME-Element nach. Ich bin mir sicher, dass du dort irgendwo angeben kannst, wie das Element in verschiedenen Bildschirmgrößen angezeigt werden soll. Die Klasse mediumScreenDisabled wird dafür nämlich explizit gesetzt und mit ziemlicher Sicherheit gibt es dafür irgendeine Option im Baukasten, mit der man das für dieses Element ändern kann.
Hier kannst du wohl auch die Mobile Ansicht deaktivieren:
Dann schreib in deren Quelltest irgendwo
Wenn das geht, kann ich das probieren.
bzw. lösche einfach die Zeile
Das wiederum kann ich nicht. Die wird wohl automatisch generiert.
Wie wurde denn die Webseite erstellt? Ist das irgendein Web-Baukasten von IONOS?
Ja, das ist deren MyWebsite Baukasten.
Die Klasse mediumScreenDisabled wird dafür nämlich explizit gesetzt und mit ziemlicher Sicherheit gibt es dafür irgendeine Option im Baukasten, mit der man das für dieses Element ändern kann.
Muss ich nochmal schauen. Im 'Code' für den IFrame selbst gab es die Option leider nicht.
Hier kannst du wohl auch die Mobile Ansicht deaktivieren
Bringt leider auch nichts. Das deaktiviert die mobile Variante der Website aber auf dem Handy ist sie dann weiterhin zu schmal.
Gibt es eine Möglichkeit über CSS die Eigenschaft separat nochmal zu überschreiben,
Nein. Du kannst über ein CSS die Breite des iframes ändern, nicht aber Inhalte innerhalb des iframes.
Alex
Klar kann man die Werte des css ändern oder überschreiben.
Der LETZE Eintrag gilt normalerweise
Wenn der Buchungskalender per iframe eingebunden ist, ist es schon ein externes Snippet.
Wie sich das Teil bei kleinerer Anzeige verhält kann natürlich niemand vorhersahen außer die Entwickler
Du kann ja anhand des externen Links im iFrame schauen von wehm es ist.
Ich würde einfach mal ausprobieren
Und falls das Teil nicht Responsable programiert ist, was heute ja Standard sein sollte, würde ich mich an diese Firma wenden.
Vielleicht gibt es auch eine Mobile Variante
Im Übrigen sollte man iFrames weitgehend vermeiden
Moin,
leider ist das kein Kalender von IONOS, sondern von der Website Feriennetzwerk. Ich bin mal so frech und poste die Website;
https://www.ferienwohnung-kribitz.de/
Ziemlich weit unten ist dort der Belegungskalender. Das Problem, das durch den Code entsteht ist, dass der Kalender dadurch nicht mehr auf Mobilgeräten sichtbar ist.