Versionen dieses Beitrags

Wie kann Media Query überschreibung

Missing liebewinter
  • Wie kann Media Query überschreibung
  • Hallo , ich versuche seit eine Woche ein Media Query zu bauen... , ich versuche mit den Emulatoren die auf dieser Seite [gibt](http://mobiletest.me/) es ...
  • ich habe alle 5 Media Querys schrieben als Samsung Galaxy der ich Später möchte machen...
  • ich habe alle 6 Media Querys schrieben als Samsung Galaxy der ich Später möchte machen...
  • alle Parameter funzioniert gute als Nokia Lumia 920 der überschreibt mein **(orientation : portrait)** vom Apple iPad Mini …
  • das probleme macht der Media Query **(orientation : portrait)** von Nokia , ich habe diese Media in andere positionen gelegt (Oben vom Media Apple iPad Mini) , aber dem Problem bleibt...
  • Das probleme in konkret habe auf **Hover** von Media Apple iPad Mini der wird von **Haver** vom Nokia ...
  • Der Code von **Nokia (orientation : portrait)**
  • ~~~CSS
  • @media only screen and (max-width : 768px) and (orientation : portrait) {
  • body {
  • display: -ms-grid;
  • display: grid;
  • grid-row-gap: 5px;
  • background-color: #ebf5d7;
  • grid-template-columns: 20% 70% 10%;
  • grid-template-areas:
  • "header header header"
  • "nav nav nav"
  • "linkBox main main"
  • "footer footer footer";
  • -ms-grid-columns: 9% 75% 16%;
  • -ms-grid-row: 120px 80px 103px 200px 110px 90px;
  • -ms-grid-gap: 5px;
  • }
  • body > header {
  • background-image: url("Bilder/view.png");
  • background-repeat: no-repeat;
  • padding: 55px;
  • margin-bottom: 1px;
  • }
  • #navs a{font-size: 11px; padding: 0px 6px;}
  • #externalLinks ul {
  • margin-left: -12px;
  • }
  • #externalLinks a {
  • font-size: 10px;
  • }
  • #name {font-size: 0.55em;}
  • #email {font-size: 0.55em;}
  • #text {font-size: 0.3em;}
  • /* HOVER */
  • .dropdown:hover .dropdown-content {
  • left: 42px;
  • top: 170px;
  • }
  • }
  • ~~~
  • Das Probleme bekomme wenn schreibt `display: -ms-grid;` , aber das soll machen weil Nokia mit Windows als Betriebe systen läuft...
  • Der(orientation : portrait) vom Apple iPad Mini Code;
  • ~~~CSS
  • @media only screen and (max-width: 64em) and (orientation: portrait) {
  • body {
  • display: grid;
  • background-color: #ebf5d7;
  • grid-template-columns: 11% 76% 13%;
  • grid-template-rows: auto auto 70vh auto;
  • grid-row-gap: 5px;
  • grid-template-areas:
  • "header header header"
  • "nav nav nav"
  • "linkBox main infoBox"
  • "footer footer footer";
  • }
  • body > main {
  • height: 70vh;
  • }
  • #name {font-size: 0.55em;}
  • #email {font-size: 0.55em;}
  • #text {font-size: 0.8em;}
  • #comment {font-size: 0.5em;}
  • #externalLinks a{text-align: left;}
  • #externalLinks ul {margin: 2px;}
  • #navs a{
  • font-size: 15px;
  • }
  • #externalLinks ul {
  • margin-left: -10px;
  • }
  • #externalLinks a {
  • font-size: 13px;
  • }
  • .dropdown:hover .dropdown-content {
  • left: 82px;
  • top: 205px;
  • }
  • }
  • ~~~
  • Kann Bitte jemand hilfe um diesr Problem zu lösen , Danke !
  • Kann Bitte jemand hilfe mir um diesen Problem zu lösen , Danke !

Wie kann Media Query überschreibung

Missing liebewinter
  • Wie kann Media Query überschreibung
  • Hallo , ich versuche seit eine Woche ein Media Query zu bauen... , ich versuche mit den Emulatoren die auf dieser Seite [gibt](http://mobiletest.me/) es ...
  • ich habe alle 5 Media Querys schrieben als Samsung Galaxy der ich Später möchte machen...
  • alle Parameter funzioniert gute als Nokia Lumia 920 der überschreibt mein **(orientation : portrait)** vom Apple iPad Mini …
  • das probleme macht der Media Query **(orientation : portrait)** von Nokia , ich habe diese Media in andere positionen gelegt (Oben vom Media Apple iPad Mini) , aber dem Problem bleibt...
  • Das probleme in konkret habe auf **Hover** von Media Apple iPad Mini der wird von **Haver** vom Nokia ...
  • Der Code von **Nokia (orientation : portrait)**
  • ~~~CSS
  • @media only screen and (max-width : 768px) and (orientation : portrait) {
  • body {
  • display: -ms-grid;
  • display: grid;
  • grid-row-gap: 5px;
  • background-color: #ebf5d7;
  • grid-template-columns: 20% 70% 10%;
  • grid-template-areas:
  • "header header header"
  • "nav nav nav"
  • "linkBox main main"
  • "footer footer footer";
  • -ms-grid-columns: 9% 75% 16%;
  • -ms-grid-row: 120px 80px 103px 200px 110px 90px;
  • -ms-grid-gap: 5px;
  • }
  • body > header {
  • background-image: url("Bilder/view.png");
  • background-repeat: no-repeat;
  • padding: 55px;
  • margin-bottom: 1px;
  • }
  • #navs a{font-size: 11px; padding: 0px 6px;}
  • #externalLinks ul {
  • margin-left: -12px;
  • }
  • #externalLinks a {
  • font-size: 10px;
  • }
  • #name {font-size: 0.55em;}
  • #email {font-size: 0.55em;}
  • #text {font-size: 0.3em;}
  • /* HOVER */
  • .dropdown:hover .dropdown-content {
  • left: 42px;
  • top: 170px;
  • }
  • }
  • ~~~
  • Das Probleme bekomme wenn schreibt `display: -ms-grid;` , aber das soll machen weil Nokia mit Windows als Betriebe systen läuft...
  • Der(orientation : portrait) vom Apple iPad Mini Code;
  • ~~~CSS
  • @media only screen and (max-width: 64em) and (orientation: portrait) {
  • body {
  • display: grid;
  • background-color: #ebf5d7;
  • grid-template-columns: 11% 76% 13%;
  • grid-template-rows: auto auto 70vh auto;
  • grid-row-gap: 5px;
  • grid-template-areas:
  • "header header header"
  • "nav nav nav"
  • "linkBox main infoBox"
  • "footer footer footer";
  • }
  • body > main {
  • height: 70vh;
  • }
  • #name {font-size: 0.55em;}
  • #email {font-size: 0.55em;}
  • #text {font-size: 0.8em;}
  • #comment {font-size: 0.5em;}
  • #externalLinks a{text-align: left;}
  • #externalLinks ul {margin: 2px;}
  • #navs a{
  • font-size: 15px;
  • }
  • #externalLinks ul {
  • margin-left: -10px;
  • }
  • #externalLinks a {
  • font-size: 13px;
  • }
  • .dropdown:hover .dropdown-content {
  • left: 82px;
  • top: 205px;
  • }
  • }
  • ~~~
  • Kann Bitte jemand hilfe um diesr Problem zu lösen , Danke !