Erstmal vielen Dank für die Antworten. Ja, hab Media Querys in Verwendung,.. allerdings bis jetzt erst den portrait Mode fürs Iphone Designed, weil mit die Funktion erstmal wichtiger ist. Ich häng auch mal css an. Was hald echt komisch ist, wenn ich die Seite auf dem Handy im Safari öffne, haben die buttons keine Rahmen. Sobald ich die Webseite auf dem Desktop speichere, sind da Rahmen ;( ~~~ CSS /*#########################################################################*/ /*################################ MAIN ###############################*/ /*#########################################################################*/ html, body { width: 100%; height: 100%; margin: 0; padding: 0px; overflow: hidden; } .grid-box{ width: 100vw; height: 100vh; display: grid; grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 15% 20% 20% 20% 25%; grid-template-areas: "header header header header header" "main main main main main " "main main main main main " "main main main main main " "main main main main main " } /* Header */ .box-1{ background: white; grid-area: header; padding: 5px; } /* Kalender */ .box-2{ margin: 5px; background: white; grid-area: main; vertical-align: bottom; overflow: hidden; } .box-2 .container .card{ width: 100%; } .form-inline{ margin: 0 auto; margin-top: 2px; padding: auto; } .btn { margin: 5px 0 0 10px; } /* Notizen */ .box-3{ grid-area: foto; background-size: cover; } /* Footer */ .box-4{ background: white; grid-area: footer; text-align: center; } /*#########################################################################*/ /*################################ KALENDER ##############################*/ /*#########################################################################*/ table{ width: 100%; height: 10%; } table, thead, tr,tbody, td, th{ border: solid black; border-collapse: collapse; padding: 0.4em; text-align: center; font-family: 'Maven Pro', sans-serif; font-weight: bolder; } th{ background-color: #e7e5e7; margin: 0 0 0 0; width: calc(100vw/7); } button{ width: 25%; font-size: 450%; background-color: white; border: solid; float: left; margin-left: -1px; padding: 0; line-height: 0.8; } #schicht{ margin: 15px 25px 0 25px; width: 35vw; float: left; font-family: 'Maven Pro', sans-serif; font-weight: bolder; } #schicht p{ text-align: center; margin-top: -5px; } #schicht .buttonS{ border: none; width: 11vw; margin-top: -5px; margin-left: 2px; font-size: 220%; } #buttonSa{ border: none; color: #f9c0ce; } #buttonSb{ border: none; color: #c1f3cf; } #buttonSc{ border: none; color: #91d1fc; } h1{ font-family: 'Maven Pro', sans-serif; text-align: left; font-weight: 1100; font-size: 425%; letter-spacing: 1px; font-stretch: expanded; line-height: 0.8; margin-top: 12px; margin-left: -2px; } h2{ font-family: 'Maven Pro', sans-serif; font-size: 278%; margin-top: -8px; margin-bottom: 15px; } .bg-info{ font-family: 'Bowlby One SC', cursive; background-image: url("../images/heuteQuer.png"); background-size: cover; margin-top: 25px; } .schichtA{ font-weight: bolder; background-color: #f9c0ce; color: black; } .schichtB{ font-weight: bolder; background-color: #c1f3cf; color: black; } .schichtC{ font-weight: bolder; background-color: #91d1fc; color: black; } /*#########################################################################*/ /*################################ PORTRAIT ##############################*/ /*#########################################################################*/ @media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait){ tr{ height: calc(100vw/7); } .grid-box{ width: 100vw; height: 100vh; display: grid; grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 6% 10% 14% 10% 14% 6% 10% 10% 16% 4%; grid-template-areas: "header header header header header" "header header header header header" "main main main main main " "main main main main main " "main main main main main " "main main main main main " "main main main main main " "main main main main main " "notes notes notes notes notes " "footer footer footer footer footer" } .form-inline{ margin: 5px auto; } .btn { margin-left: 0px; margin-top: 15px; } .bg-info{ font-weight: bolder; background-image: url("../images/heute.png"); background-size: cover; } /* Foto*/ .box-3{ background: white; background-size: cover; margin: 5px; border: solid; grid-area: notes; } /* Footer */ .box-4{ background: white; grid-area: footer; font-size: 70%; color: gray; } #buttonSa{ border: none; color: #f9c0ce; } #buttonSb{ border: none; color: #c1f3cf; } #buttonSc{ border: none; color: #91d1fc; } } /*#########################################################################*/ /*############################### LANDSCPAE #############################*/ /*#########################################################################*/ @media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape){ .grid-box{ width: 100vw; height: 100vh; display: grid; grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 10% 10% 10% 10% 15% 5% 10% 10% 10% 10%; grid-template-areas: "header header header header header" "header header header header header" "main main main main main " "main main main main main " "main main main main main " "main main main main main " "main main main main main " "main main main main main " "main main main main main " "footer footer footer footer footer" } h3{ margin -25px; font-family: 'Open Sans', sans-serif; } .card .card-header #monthAndYear{ margin-top: -35px; } .card{ height: 100%; } .form-inline{ margin: 20px auto; } tr{ height: calc(100vw/28); } .bg-info{ font-weight: bolder; background-image: url("../images/heute.png"); background-size: cover; } /* Foto*/ .box-3{ visibility: collapse; } /* Footer */ .box-4{ visibility: collapse; } } ~~~ Das Problem betrifft die 3 Buttons #buttonSa #buttonSb und #buttonSc

Erstmal vielen Dank für die Antworten. Ja, hab Media Querys in Verwendung,.. allerdings bis jetzt erst den portrait Mode fürs Iphone Designed, weil mit die Funktion erstmal wichtiger ist. Ich häng auch mal css an. Was hald echt komisch ist, wenn ich die Seite auf dem Handy im Safari öffne, haben die buttons keine Rahmen. Sobald ich die Webseite auf dem Desktop speichere, sind da Rahmen ;( ~~~ CSS /*#########################################################################*/ /*################################ MAIN ###############################*/ /*#########################################################################*/ html, body { width: 100%; height: 100%; margin: 0; padding: 0px; overflow: hidden; } .grid-box{ width: 100vw; height: 100vh; display: grid; grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 15% 20% 20% 20% 25%; grid-template-areas: "header header header header header" "main main main main main " "main main main main main " "main main main main main " "main main main main main " } /* Header */ .box-1{ background: white; grid-area: header; padding: 5px; } /* Kalender */ .box-2{ margin: 5px; background: white; grid-area: main; vertical-align: bottom; overflow: hidden; } .box-2 .container .card{ width: 100%; } .form-inline{ margin: 0 auto; margin-top: 2px; padding: auto; } .btn { margin: 5px 0 0 10px; } /* Notizen */ .box-3{ grid-area: foto; background-size: cover; } /* Footer */ .box-4{ background: white; grid-area: footer; text-align: center; } /*#########################################################################*/ /*################################ KALENDER ##############################*/ /*#########################################################################*/ table{ width: 100%; height: 10%; } table, thead, tr,tbody, td, th{ border: solid black; border-collapse: collapse; padding: 0.4em; text-align: center; font-family: 'Maven Pro', sans-serif; font-weight: bolder; } th{ background-color: #e7e5e7; margin: 0 0 0 0; width: calc(100vw/7); } button{ width: 25%; font-size: 450%; background-color: white; border: solid; float: left; margin-left: -1px; padding: 0; line-height: 0.8; } #schicht{ margin: 15px 25px 0 25px; width: 35vw; float: left; font-family: 'Maven Pro', sans-serif; font-weight: bolder; } #schicht p{ text-align: center; margin-top: -5px; } #schicht .buttonS{ border: none; width: 11vw; margin-top: -5px; margin-left: 2px; font-size: 220%; } #buttonSa{ border: none; color: #f9c0ce; } #buttonSb{ border: none; color: #c1f3cf; } #buttonSc{ border: none; color: #91d1fc; } h1{ font-family: 'Maven Pro', sans-serif; text-align: left; font-weight: 1100; font-size: 425%; letter-spacing: 1px; font-stretch: expanded; line-height: 0.8; margin-top: 12px; margin-left: -2px; } h2{ font-family: 'Maven Pro', sans-serif; font-size: 278%; margin-top: -8px; margin-bottom: 15px; } .bg-info{ font-family: 'Bowlby One SC', cursive; background-image: url("../images/heuteQuer.png"); background-size: cover; margin-top: 25px; } .schichtA{ font-weight: bolder; background-color: #f9c0ce; color: black; } .schichtB{ font-weight: bolder; background-color: #c1f3cf; color: black; } .schichtC{ font-weight: bolder; background-color: #91d1fc; color: black; } /*#########################################################################*/ /*################################ PORTRAIT ##############################*/ /*#########################################################################*/ @media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait){ tr{ height: calc(100vw/7); } .grid-box{ width: 100vw; height: 100vh; display: grid; grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 6% 10% 14% 10% 14% 6% 10% 10% 16% 4%; grid-template-areas: "header header header header header" "header header header header header" "main main main main main " "main main main main main " "main main main main main " "main main main main main " "main main main main main " "main main main main main " "notes notes notes notes notes " "footer footer footer footer footer" } .form-inline{ margin: 5px auto; } .btn { margin-left: 0px; margin-top: 15px; } .bg-info{ font-weight: bolder; background-image: url("../images/heute.png"); background-size: cover; } /* Foto*/ .box-3{ background: white; background-size: cover; margin: 5px; border: solid; grid-area: notes; } /* Footer */ .box-4{ background: white; grid-area: footer; font-size: 70%; color: gray; } #buttonSa{ border: none; color: #f9c0ce; } #buttonSb{ border: none; color: #c1f3cf; } #buttonSc{ border: none; color: #91d1fc; } } /*#########################################################################*/ /*############################### LANDSCPAE #############################*/ /*#########################################################################*/ @media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape){ .grid-box{ width: 100vw; height: 100vh; display: grid; grid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 10% 10% 10% 10% 15% 5% 10% 10% 10% 10%; grid-template-areas: "header header header header header" "header header header header header" "main main main main main " "main main main main main " "main main main main main " "main main main main main " "main main main main main " "main main main main main " "main main main main main " "footer footer footer footer footer" } h3{ margin -25px; font-family: 'Open Sans', sans-serif; } .card .card-header #monthAndYear{ margin-top: -35px; } .card{ height: 100%; } .form-inline{ margin: 20px auto; } tr{ height: calc(100vw/28); } .bg-info{ font-weight: bolder; background-image: url("../images/heute.png"); background-size: cover; } /* Foto*/ .box-3{ visibility: collapse; } /* Footer */ .box-4{ visibility: collapse; } } ~~~