bbwd345
February 10, 2019, 12:58pm
#1
Hallo , sorry about my English…
I build my layout with Grid .
I search to build a Responsive Web Design for Google Nexus Tablet .Mit this code;
/* Tablet Nexus 7 (Landscape) */
@media only screen and (width: 37.6875em) and (orientation: landscape) {
body {
height: 100%;
display: grid;
grid-template-columns: 12% 75% 13%;
grid-template-rows: auto auto 70vh auto;
grid-gap: 5px;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main infoBox"
"footer footer footer";
}
body > main {
height: 70vh;
}
}
/* Tablet Nexus 7 (Portrait) */
@media screen and (min-width: 30.06em)
and (max-width: 38.6875em)
and (orientation: portrait){
body {
display: grid;
grid-template-columns: 17% 70% 13%;
grid-template-rows: auto auto 70vh auto;
grid-gap: 5px;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main main"
"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;}
}
but with orientation: landscape i to receive this Screenshot…
How too see , below from footer have empty place , what can to do and this Problem to solve ??
Can please anyone help me , Thanks !
jenovs
February 10, 2019, 1:57pm
#2
I don’t see HTML, but set body height to 100vh and add grid-area: main to body > main
bbwd345
February 10, 2019, 2:02pm
#3
Thanks for your answer ! , i don’t understand
add grid-area: main to body > main
jenovs
February 10, 2019, 2:04pm
#4
body > main {
grid-area: main; // add this
...
}
bbwd345
February 10, 2019, 2:06pm
#5
now i have this Code;
@media screen and (min-width: 37.5em) and (max-width: 62.375em) {
body {
display: grid;
grid-template-columns: 12% 75% 13%;
grid-template-rows: auto auto 100vh auto;
grid-gap: 5px;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main infoBox"
"footer footer footer";
}
body > main {
grid-area: main;
}
}
but nothing to change …
Here how have all css Code for Desktop , Tablet and smartphone…
@media (min-width: 20em) and (max-width: 30em) {
body {
display: grid;
grid-template-columns: 13% 77% 10%;
grid-template-rows: auto auto 70vh auto;
grid-gap: 5px;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main main"
"footer footer footer";
}
body > main {
height: 70vh;
}
/* HOVER */
.dropdown:hover, .dropdown:focus, .dropdown:active, .dropdown-content {
display: block;
top: 20em;
}
}
/* Tablet Nexus 7 (Portrait) */
@media screen and (min-width: 30.06em)
and (max-width: 38.6875em)
and (orientation: portrait){
body {
display: grid;
grid-template-columns: 17% 70% 13%;
grid-template-rows: auto auto 70vh auto;
grid-gap: 5px;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main main"
"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;}
}
/* Tablet Nexus 7 (Landscape) */
@media screen and (min-width: 37.5em) and (max-width: 62.375em) {
body {
display: grid;
grid-template-columns: 12% 75% 13%;
grid-template-rows: auto auto 100vh auto;
grid-gap: 5px;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main infoBox"
"footer footer footer";
}
body > main {
grid-area: main;
}
}
/* Tablet iPad 4 generation & iPad air, Landscape */
@media screen and (min-width: 48em)
and (max-width: 64em)
and (orientation: landscape){
body {
display: grid;
grid-template-columns: 10% 77% 13%;
grid-template-rows: auto auto 70vh auto;
grid-gap: 5px;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main infoBox"
"footer footer footer";
}
body > main {
height: 70vh;
}
}
/* Tablet iPad 4 generation & iPad air, Portrait */
@media screen and (min-width: 48em) and (max-width: 64em) {
body {
display: grid;
grid-template-columns: 14% 73% 13%;
grid-template-rows: auto auto 70vh auto;
grid-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;}
}
/* My Desktop */
@media (min-width: 64.0625em) and (max-width: 80.06em) {
body{
background-color: #ebf5d7;
grid-gap: 5px;
grid-template-columns: 9% 73% 18%;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main infoBox"
"footer footer footer" ;
}
}
@media screen and (min-width: 80.0625em) {
body {
display: grid;
grid-template-columns: 10% 72% 18%;
grid-gap: 5px;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main infoBox"
"footer footer footer";
}
}
jenovs
February 10, 2019, 2:10pm
#6
It was for the landscape orientation media query.
bbwd345
February 10, 2019, 2:13pm
#7
now a writing this…
@media screen and (min-width: 37.5em) and (max-width: 62.375em) and (orientation: landscape) {
body {
display: grid;
grid-template-columns: 12% 75% 13%;
grid-template-rows: auto auto 100vh auto;
grid-gap: 5px;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main infoBox"
"footer footer footer";
}
body > main {
grid-area: main;
}
}
what not to change…
jenovs
February 10, 2019, 2:18pm
#8
Why are you creating million media queries if all of them are basically the same?
Also you better post your code on codepen.io or jsfiddle.net , because right now you’re posting every time something different.
bbwd345
February 10, 2019, 2:28pm
#9
My code on codepen.io
My Code for desktop , Tablet ,…
@media (min-width: 20em) and (max-width: 30em) {
body {
display: grid;
grid-template-columns: 13% 77% 10%;
grid-template-rows: auto auto 70vh auto;
grid-gap: 5px;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main main"
"footer footer footer";
}
body > main {
height: 70vh;
}
/* HOVER */
.dropdown:hover, .dropdown:focus, .dropdown:active, .dropdown-content {
display: block;
top: 20em;
}
}
/* Tablet Nexus 7 (Portrait) */
@media screen and (min-width: 30.06em)
and (max-width: 38.6875em)
and (orientation: portrait){
body {
display: grid;
grid-template-columns: 17% 70% 13%;
grid-template-rows: auto auto 70vh auto;
grid-gap: 5px;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main main"
"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;}
}
/* Tablet Nexus 7 (Landscape) */
@media screen and (min-width: 37.5em) and (max-width: 62.375em) and (orientation: landscape) {
body {
display: grid;
grid-template-columns: 12% 75% 13%;
grid-template-rows: auto auto 100vh auto;
grid-gap: 5px;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main infoBox"
"footer footer footer";
}
body > main {
grid-area: main;
}
}
/* Tablet iPad 4 generation & iPad air, Landscape */
@media screen and (min-width: 48em)
and (max-width: 64em)
and (orientation: landscape){
body {
display: grid;
grid-template-columns: 10% 77% 13%;
grid-template-rows: auto auto 70vh auto;
grid-gap: 5px;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main infoBox"
"footer footer footer";
}
body > main {
height: 70vh;
}
}
/* Tablet iPad 4 generation & iPad air, Portrait */
@media screen and (min-width: 48em) and (max-width: 64em) {
body {
display: grid;
grid-template-columns: 14% 73% 13%;
grid-template-rows: auto auto 70vh auto;
grid-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;}
}
/* My Desktop */
@media (min-width: 64.0625em) and (max-width: 80.06em) {
body{
background-color: #ebf5d7;
grid-gap: 5px;
grid-template-columns: 9% 73% 18%;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main infoBox"
"footer footer footer" ;
}
}
@media screen and (min-width: 80.0625em) {
body {
display: grid;
grid-template-columns: 10% 72% 18%;
grid-gap: 5px;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main infoBox"
"footer footer footer";
}
}
Why are you creating million media queries if all of them are basically the same?
i try as here tell…
jenovs
February 10, 2019, 4:15pm
#10
I checked your codepen and it works fine, but it doesn’t have any media queries.
bbwd345
February 10, 2019, 4:28pm
#11
I checked your codepen and it works fine
yes , but in Desktop and iPad air , not on Nexus…
I to want it with a Virtual machine , here …
fine, but it doesn’t have any media queries.
because have all media queries on another File… , the Code is above from your last writing…
bbwd345
February 10, 2019, 6:53pm
#12
I found that problem !
because i to use in my media landscape grid-template-rows: auto auto 70vh auto; and too…
body > main {
height: 70vh;
}
The Code for Nexus i have lost , because Apple 4 generation (iPad, Tablets) and Nexus have like greater (Nexus is only a little small as iPad) .Only have now the Code for Nexus for Portrait .iPad Tablets and Nexus on Landscap e .
@media screen and (min-width: 48em)
and (max-width: 64em)
and (orientation: landscape){
body {
display: grid;
grid-template-columns: 11% 76% 13%;
grid-gap: 5px;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main infoBox"
"footer footer footer";
}
}
what i don’t understand , what does grid-template-rows: auto auto 70vh auto; on Portrait …
@ jenovs , very thanks for your help !
