Hallo > > > ~~~css,bad > > > @media (width <= 60em) { > > > .only-in-small-viewports { display: none; } > > > } > > > @media (width > 60em) { > > > .not-in-small-viewports { display: none; } > > > } > > > ~~~ > (@2024-08-19:„Bad“: „aber CSS Conditionals Level 5 sind noch nicht so weit.“) > > > > > Man erkläre mir den Unterschied zwischen `display: none;`{: .language-css} und `display: none;`{: .language-css}. Das geht doch viel einfacher, ganz ohne Media-Queries, mit `display: none;`{: .language-css}. 😉 > > Ja. Das addressiert quasi das Problem mit meinen Kastensätzen, bei deren Wahrnehmumg schnell mal was verloren geht. > > Das Gehemnis ist liegt in den schnll zu übersehenden `.only-in-small-viewports` vers. `.not-in-small-viewports`, genauer des Teils **„only“** und **„not“**. Die unterschiedlichen Klassennamen habe ich wohl wahrgenommen. Da es zuvor aber um das *anzeigemodellgerechte* zurücksetzen von `display: none;`{: .language-css} ging, habe ich erwartet, etwas wie ein umschalten zu sehen. ~~~css @media (width <= 60em) { .irgendwas { display: none; } } @media (width > 60em) { .irgendwas { display: grid; } } ~~~ Aber das ginge ja auch mit folgendem.. ~~~css .irgendwas { display: grid; } @media (width <= 60em) { .irgendwas { display: none; } } ~~~ > Per default sind ja alle Elemente, also auch die der genannten Klassen sichtbar und je nach Viewport sollen solche Elemente der jeweils adressierten Klassen unsichtbar gemacht werden. Tja, das war dann wohl der für mich unerwartete Themenwechsel von „*ein*- und *aus*schalten“ hin zu „mal hier und mal da *aus*schalten und *aus*schalten“. Das ist die Sache mit der Erwartung. 😁 Tschö, Auge -- „Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde

Hallo > > > ~~~css,bad > > > @media (width <= 60em) { > > > .only-in-small-viewports { display: none; } > > > } > > > @media (width > 60em) { > > > .not-in-small-viewports { display: none; } > > > } > > > ~~~ > (@2024-08-19:„Bad“: „aber CSS Conditionals Level 5 sind noch nicht so weit.“) > > > > > Man erkläre mir den Unterschied zwischen `display: none;`{: .language-css} und `display: none;`{: .language-css}. Das geht doch viel einfacher, ganz ohne Media-Queries, mit `display: none;`{: .language-css}. 😉 > > Ja. Das addressiert quasi das Problem mit meinen Kastensätzen, bei deren Wahrnehmumg schnell mal was verloren geht. > > Das Gehemnis ist liegt in den schnll zu übersehenden `.only-in-small-viewports` vers. `.not-in-small-viewports`, genauer des Teils **„only“** und **„not“**. Die unterschiedlichen Klassennamen habe ich wohl wahrgenommen. Da es zuvor aber um das *anzeigemodellgerechte* zurücksetzen von `display: none;`{: .language-css} ging, habe ich erwaertet etwas wie ein umschalten zu sehen. ~~~css @media (width <= 60em) { .irgendwas { display: none; } } @media (width > 60em) { .irgendwas { display: grid; } } ~~~ Aber das ginge ja auch mit folgendem.. ~~~css .irgendwas { display: grid; } @media (width <= 60em) { .irgendwas { display: none; } } ~~~ > Per default sind ja alle Elemente, also auch die der genannten Klassen sichtbar und je nach Viewport sollen solche Elemente der jeweils adressierten Klassen unsichtbar gemacht werden. Tja, das war dann wohl der für mich unerwartete Themenwechsel von „*ein*- und *aus*schalten“ hin zu „mal hier und mal da *aus*schalten und *aus*schalten“. Das ist die Sache mit der Erwartung. 😁 Tschö, Auge -- „Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde