CSS - Media Query im Head funktioniert nicht

Antworten
#1
05.04.2019 12:51 (zuletzt bearbeitet: 05.04.2019 13:08)
avatar  Rainer
#1
Ra
Rainer

Hallo,

ich habe einen Kalender über ein iframe eingebunden, dessen Monatsübersicht für die Dekstop-Bildschirmbreite super ist. Leider lässt er sich am Smartphone nicht verschieben, ist völlig abgeschnitten. Aus dem Grund habe ich den gleichen Kalender in einer Listenansicht für Smartphone-Screen-Breite ein zweites mal eingebunden. Nun will ich, dass je nach Bildschirmbreite des Users die entsprechende Ansicht gezeigt wird.

Hier ist mein Code, den ich im Head der (kleinen) Website eingefügt habe:

1
2
3
4
5
6
7
8
9
10
 
<style type="text/css">
@media (max-width:768px) {
 /*Kalenderübersicht Monat*/
 #cc-m-all-content-16681904596{display:none;}
 } 
@media (min-width:768px) {
  /*Kleinere tabellarische Übersicht des Kalenders*/
 #cc-m-all-content-16746400296{display:none;}
} 
</style>
 



Leider funktioniert es nicht. Es werden immer beide Kalenderansichten gezeigt, egal wie groß der Bildschirm ist.
Was mache ich falsch?
Der Link zur Site: www.eg-straubing.de.

Bin dankbar für eure Hilfe.
Gruß Rainer


 Antworten

 Beitrag melden
#2
05.04.2019 13:07
avatar  az_
#2
avatar
az_

...so ist es richtig:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 

 
<style type="text/css">
	
	/*Kalenderübersicht Normal*/
	#cc-m-all-content-16746400296 {
		display: none;
	}
 

	/*Kalenderübersicht Mobil*/
	@media (max-width:767px) {
		#cc-m-all-content-16681904596 {
			display: none;
		}
	}
 
</style>
 

 



LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#3
05.04.2019 15:10
avatar  Rainer
#3
Ra
Rainer

Danke az_,

leider funktioniert es auch mit deinem Code nicht. Es werden im Browseraufruf immer beide Kalender gezeigt. Nur im Bearbeitungsmodus in Jimlo gelingt es, dass der "kleine" Kalender ausgeblendet ist. Muss ich evtl. noch was anderes einstellen, damit der Code angenommen wird?

Gruß Rainer


 Antworten

 Beitrag melden
#4
05.04.2019 18:24 (zuletzt bearbeitet: 05.04.2019 18:24)
avatar  az_
#4
avatar
az_

Poste uns bitte mal deine URL


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#5
07.04.2019 16:12
avatar  Rainer
#5
Ra
Rainer

 Antworten

 Beitrag melden
#6
07.04.2019 21:46
avatar  az_
#6
avatar
az_

...der erste Kalender hat die ID #cc-m-16681904596, der zweite die #cc-m-16746400296. Mit diesen IDs müsste es funktionieren.

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#7
09.04.2019 08:12 (zuletzt bearbeitet: 10.04.2019 13:41)
avatar  Rainer
#7
Ra
Rainer

Hallo az_, vielen Dank. Jetzt funktioniert es nach einigem Probieren. Ich musste aber wieder meinen "alten" Code anwenden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<style type="text/css">
/*<![CDATA[*/
        
        /*Kalenderübersicht Normal*/
         @media (max-width:767px) {
        #cc-m-16681904596 {
                display: none;
        }
         }
 
 
        /*Kalenderübersicht Mobil*/
        @media (min-width:768px) {
                #cc-m-16746400296 {
                        display: none;
                }
        }
 
/*]]>*/
</style>
 




Bedeutet das, dass für das gleiche Element die ID in der Entwicklungsumgebung von Jimdo eine andere ist als die in der User-Ansicht?
Falls du noch Geduld und Zeit hast, noch eine Frage: In der Mobil-Ansicht ist der Abstand des ausgeblendeten Kalenders recht groß. Um den zu verkleinern, müsste ich hier noch eine "matrix" ausblenden oder einen wrapper?


 Antworten

 Beitrag melden
#8
10.04.2019 13:52
avatar  az_
#8
avatar
az_

Zitat
Bedeutet das, dass für das gleiche Element die ID in der Entwicklungsumgebung von Jimdo eine andere ist als die in der User-Ansicht?



...nein, eine ID mit display:none erscheint auch in der Bearbeitungsansicht nicht mehr.


Zitat
In der Mobil-Ansicht ist der Abstand des ausgeblendeten Kalenders recht groß. Um den zu verkleinern, müsste ich hier noch eine "matrix" ausblenden oder einen wrapper?



...es gibt da zwei "Spacer"-Elemente und einen Content Container - diese kannst Du auch noch herausnehmen.

Hier ein Tutorial zu der Frage, wie man die Bezeichner findet: https://support.jimdo.com/faq/how-to-mod...lates-with-css/

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!