Guten Tag Ich habe eine Internetseite mit Flexbox umgesetzt. Jetzt funktioniert diese auf allen ausprobierten Browsern (inkl. IE10) aber nicht auf meinem Windows Phone. Da wird die Seite total falsch angezeigt. Ich habe gedacht Windows Phone 8.1 arbeite mit IE11, aber dem scheint nicht so. ~~~html <article class="mitUmbruch"><!-- Aktuelles --> <h1>Aktuell</h1> <p>Am 4. November 2016 findet die Ausstellung "Glanzmomente im Halterhaus / Bilder und Lampen" statt.<br /> Hier geht's zum <a href="Bilder/Aktuell/FlyerRueckseite.jpg" target="_new">Flyer</a></p> </article> <article class="mitUmbruch"><!-- Portrait --> <img src="Bilder/Portrait.jpg" alt="Portrait" title="Portrait" style="width:200px;height:269px;" /> </article> ~~~ ~~~css main { padding:1em;/* Abstand Inhalt zu Header und Rand */ text-align:center; display: -webkit-box; /* main wird zu flexbox */ display: -moz-box; display: -ms-flexbox; display: -webkit-flex; -webkit-display: flex; display:flex; -webkit-box-flex-direction:column;/*Alle Artikel in main werden auf die ganze Seite aufgezogen*/ -moz-box-flex-direction:column; -ms-flex-direction:column; -webkit-flex-flow:column; flex-flow:column; -webkit-box-justify-content:center;/* Die enthaltenen Boxes werden zentriert plaziert. */ -moz-box-justify-content:center; -ms-flex-justify-content:center; -webkit-justify-content:center; justify-content:center; box-shadow: 0px 3px 3px #727270 inset;/* Dunkelgraue Abtrennung unterhalb Navigation */ } .BildVergroessern:active{ -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } .BildVergroessern:hover{ -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } main img{ padding-right:1em; } .mitUmbruch h1,h2,h3{ -webkit-box-flex:1 1 100%;/* Titel nehmen 100% der Breite ein */ -moz-box-flex:1 1 100%; -ms-flex:1 1 100%; -webkit-flex:1 1 100%; flex:1 1 100%; } .mitUmbruch { padding-bottom:0.5em; padding-top:0.5em; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; -webkit-display: flex; display:flex; -webkit-box-flex-flow:row wrap;/* Artikel wird in Zeilen orientiert. Alle boxes sind gleich hoch. */ -moz-box-flex-flow:row wrap; -ms-flex-flow:row wrap; -webkit-flex-flow: row wrap; display-flow:row wrap; -webkit-box-justify-content:center;/* Die enthaltenen Boxes werden zentriert plaziert. */ -moz-box-justify-content:center; -ms-flex-justify-content:center; -webkit-justify-content:center; justify-content:center; border-bottom: 1px solid #727270; } ~~~ Raus kommt auf dem Windows Phone folgendes:    Übersehe ich einen Fehler im Code? Ich weiss, dass Windows Phone nicht wirklich sehr verbreitet ist, aber es ärgert mich, dass ich selbst die Seite nicht anschauen kann, da ich ja ein Windows Phone habe. ;-) Ich hoffe der Beitrag ist nicht zu lang oder unverständlich oder sonst nervig. LG und vielen Dank für die Antworten im Voraus

Guten Tag Ich habe eine Internetseite mit Flexbox umgesetzt. Jetzt funktioniert diese auf allen ausprobierten Browsern (inkl. IE10) aber nicht auf meinem Windows Phone. Da wird die Seite total falsch angezeigt. Ich habe gedacht Windows Phone 8.1 arbeite mit IE11, aber dem scheint nicht so. ~~~html <article class="mitUmbruch"><!-- Aktuelles --> <h1>Aktuell</h1> <p>Am 4. November 2016 findet die Ausstellung "Glanzmomente im Halterhaus / Bilder und Lampen" statt.<br /> Hier geht's zum <a href="Bilder/Aktuell/FlyerRueckseite.jpg" target="_new">Flyer</a></p> </article> <article class="mitUmbruch"><!-- Portrait --> <img src="Bilder/Portrait.jpg" alt="Portrait" title="Portrait" style="width:200px;height:269px;" /> </article> ~~~ ~~~css main { padding:1em;/* Abstand Inhalt zu Header und Rand */ text-align:center; display: -webkit-box; /* main wird zu flexbox */ display: -moz-box; display: -ms-flexbox; display: -webkit-flex; -webkit-display: flex; display:flex; -webkit-box-flex-direction:column;/*Alle Artikel in main werden auf die ganze Seite aufgezogen*/ -moz-box-flex-direction:column; -ms-flex-direction:column; -webkit-flex-flow:column; flex-flow:column; -webkit-box-justify-content:center;/* Die enthaltenen Boxes werden zentriert plaziert. */ -moz-box-justify-content:center; -ms-flex-justify-content:center; -webkit-justify-content:center; justify-content:center; box-shadow: 0px 3px 3px #727270 inset;/* Dunkelgraue Abtrennung unterhalb Navigation */ } .BildVergroessern:active{ -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } .BildVergroessern:hover{ -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } main img{ padding-right:1em; } .mitUmbruch h1,h2,h3{ -webkit-box-flex:1 1 100%;/* Titel nehmen 100% der Breite ein */ -moz-box-flex:1 1 100%; -ms-flex:1 1 100%; -webkit-flex:1 1 100%; flex:1 1 100%; } .mitUmbruch { padding-bottom:0.5em; padding-top:0.5em; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; -webkit-display: flex; display:flex; -webkit-box-flex-flow:row wrap;/* Artikel wird in Zeilen orientiert. Alle boxes sind gleich hoch. */ -moz-box-flex-flow:row wrap; -ms-flex-flow:row wrap; -webkit-flex-flow: row wrap; display-flow:row wrap; -webkit-box-justify-content:center;/* Die enthaltenen Boxes werden zentriert plaziert. */ -moz-box-justify-content:center; -ms-flex-justify-content:center; -webkit-justify-content:center; justify-content:center; border-bottom: 1px solid #727270; } Raus kommt auf dem Windows Phone folgendes: ](/images/b9fcf58a-baf8-4006-bb82-a62a23b867f2.jpg)](/images/0f8d0396-b8b3-4c73-a73a-d7a07b554261.jpg) ~~~ Übersehe ich einen Fehler im Code? Ich weiss, dass Windows Phone nicht wirklich sehr verbreitet ist, aber es ärgert mich, dass ich selbst die Seite nicht anschauen kann, da ich ja ein Windows Phone habe. ;-) Ich hoffe der Beitrag ist nicht zu lang oder unverständlich oder sonst nervig. LG und vielen Dank für die Antworten im Voraus

Guten Tag Ich habe eine Internetseite mit Flexbox umgesetzt. Jetzt funktioniert diese auf allen ausprobierten Browsern (inkl. IE10) aber nicht auf meinem Windows Phone. Da wird die Seite total falsch angezeigt. Ich habe gedacht Windows Phone 8.1 arbeite mit IE11, aber dem scheint nicht so. ~~~html <article class="mitUmbruch"><!-- Aktuelles --> <h1>Aktuell</h1> <p>Am 4. November 2016 findet die Ausstellung "Glanzmomente im Halterhaus / Bilder und Lampen" statt.<br /> Hier geht's zum <a href="Bilder/Aktuell/FlyerRueckseite.jpg" target="_new">Flyer</a></p> </article> <article class="mitUmbruch"><!-- Portrait --> <img src="Bilder/Portrait.jpg" alt="Portrait" title="Portrait" style="width:200px;height:269px;" /> </article> ~~~ ~~~css main { padding:1em;/* Abstand Inhalt zu Header und Rand */ text-align:center; display: -webkit-box; /* main wird zu flexbox */ display: -moz-box; display: -ms-flexbox; display: -webkit-flex; -webkit-display: flex; display:flex; -webkit-box-flex-direction:column;/*Alle Artikel in main werden auf die ganze Seite aufgezogen*/ -moz-box-flex-direction:column; -ms-flex-direction:column; -webkit-flex-flow:column; flex-flow:column; -webkit-box-justify-content:center;/* Die enthaltenen Boxes werden zentriert plaziert. */ -moz-box-justify-content:center; -ms-flex-justify-content:center; -webkit-justify-content:center; justify-content:center; box-shadow: 0px 3px 3px #727270 inset;/* Dunkelgraue Abtrennung unterhalb Navigation */ } .BildVergroessern:active{ -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } .BildVergroessern:hover{ -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); } main img{ padding-right:1em; } .mitUmbruch h1,h2,h3{ -webkit-box-flex:1 1 100%;/* Titel nehmen 100% der Breite ein */ -moz-box-flex:1 1 100%; -ms-flex:1 1 100%; -webkit-flex:1 1 100%; flex:1 1 100%; } .mitUmbruch { padding-bottom:0.5em; padding-top:0.5em; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; -webkit-display: flex; display:flex; -webkit-box-flex-flow:row wrap;/* Artikel wird in Zeilen orientiert. Alle boxes sind gleich hoch. */ -moz-box-flex-flow:row wrap; -ms-flex-flow:row wrap; -webkit-flex-flow: row wrap; display-flow:row wrap; -webkit-box-justify-content:center;/* Die enthaltenen Boxes werden zentriert plaziert. */ -moz-box-justify-content:center; -ms-flex-justify-content:center; -webkit-justify-content:center; justify-content:center; border-bottom: 1px solid #727270; } Raus kommt auf dem Windows Phone folgendes: ](/images/b9fcf58a-baf8-4006-bb82-a62a23b867f2.jpg)](/images/0f8d0396-b8b3-4c73-a73a-d7a07b554261.jpg) ~~~ Übersehe ich einen Fehler im Code? Ich weiss, dass Windows Phone nicht wirklich sehr verbreitet ist, aber es ärgert mich, dass ich selbst die Seite nicht anschauen kann, da ich ja ein Windows Phone habe. ;-) Ich hoffe der Beitrag ist nicht zu lang oder unverständlich oder sonst nervig. LG und vielen Dank für die Antworten im Voraus