I would not suggest using device-specific settings for your media queries. You should test the layout by using the browser to look at different screen sizes and look for where the layout starts to break. Then make the changes needed at that screen size.
I would not suggest using device-specific settings for your media queries.
why ? , can you please explain me , thanks
very thanks for your suggest , but without device-specific settings i come override , i fight since a Week and this to prevent but without solved it …now working all gut …
Hey @bbwd345, if I could chime in here. I’m fairly certain that the reason to avoid device-specific CSS layouts is simply due to the vast amount of devices out there. Imagine trying to create a page layout for the hundreds of mobile phones and tablets available right now, all with different physical screen sizes, screen resolutions, and pixel density (such as Apple’s 2x or 3x resolution displays).
You’d be much better off designing for generic “break points” such as 320px width (generic mobile phone portrait), 450px width (generic mobile phone landscape etc.
You have right , they are too many… but my problem is with Hover from my left side , how can you see from my Web Site , with only little PX difference , they open very difference… what can you suggest for this Problem ?
You’d be much better off designing for generic “break points”
I wish breakpoints were defined in terms of real-world units, like inches or centimeters. Those do work, but browsers still haven’t caught up to the 1980’s technology of X and still hardwire a density of 96 dpi (laughably low now), so we’re still stuck with pixels.
I tried searching your site for the problem you were having, but I am having trouble understanding. Could you clarify this point for me? I’m very curious.
Exactly. Having media breakpoints and designing mobile-first is a good design choice.
You don’t need to worry too much about pixel density for break points. The example I was referring to is designing layout and sizing images for something like iPhone “retina displays”. This website gives an overview of how Apple renders pixels on mobile devices.
body {
background-color: #ebf5d7;
grid-row-gap: 5px;
grid-template-columns: 10% 72% 17%;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox linkBox linkBox"
"main main main"
"infoBox infoBox infoBox"
"footer footer footer" ;
}
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
body {
display: grid;
display: -ms-grid;
background-color: #ebf5d7;
grid-row-gap: 5px;
grid-template-columns: 8% 74% 18%;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main infoBox"
"footer footer footer";
-ms-grid-columns: 8% 74% 18%;
-ms-grid-row: 120px 80px 103px 200px 110px 90px;
-ms-grid-gap: 5px;
}
}
body > header {
grid-area: header;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
background-image: url("Bilder/view.png");
background-repeat: no-repeat;
padding: 60px;
}
body > nav {
grid-area: nav;
-ms-grid-column: 1/3;
-ms-grid-column-span: 3;
-ms-grid-row: 2;
background-color: #d2f5c4;
margin: 1px;
}
body > #externalLinks {
grid-area: linkBox;
-ms-grid-column: 1;
-ms-grid-row: 3;
-ms-grid-row-span: 5;
grid-template-columns: 1;
grid-template-rows: 3/4;
margin: 1px;
background-color: #d2f3c6;
}
body > main {
grid-area: main;
display: block;
-ms-grid-column: 2;
-ms-grid-row: 3;
-ms-grid-row-span: 3;
margin: 1px;
background-color: #eaf6e5;
}
body > #furtherInformation {
grid-area: infoBox;
-ms-grid-column: 3;
-ms-grid-column-span: 3;
-ms-grid-row: 3;
-ms-grid-row-span: 3;
margin: 1px;
background-color: #d2f3c6;
}
body > footer {
grid-area: footer;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row: 6;
-ms-grid-row-span: 6;
background-color: #99ee7a;
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
body {
display: grid;
display: -ms-grid;
background-color: #ebf5d7;
grid-row-gap: 5px;
grid-template-columns: 8% 74% 18%;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main infoBox"
"footer footer footer";
-ms-grid-columns: 8% 74% 18%;
-ms-grid-row: 120px 80px 103px 200px 110px 90px;
-ms-grid-gap: 5px;
}
}
body > header {
grid-area: header;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row: 1;
-ms-grid-row-span: 1;
background-image: url("Bilder/view.png");
background-repeat: no-repeat;
padding: 60px;
}
body > nav {
grid-area: nav;
-ms-grid-column: 1/3;
-ms-grid-column-span: 3;
-ms-grid-row: 2;
background-color: #d2f5c4;
margin: 1px;
}
body > #externalLinks {
grid-area: linkBox;
-ms-grid-column: 1;
-ms-grid-row: 3;
-ms-grid-row-span: 5;
grid-template-columns: 1;
grid-template-rows: 3/4;
margin: 1px;
background-color: #d2f3c6;
}
body > main {
grid-area: main;
display: block;
-ms-grid-column: 2;
-ms-grid-row: 3;
-ms-grid-row-span: 3;
margin: 1px;
background-color: #eaf6e5;
}
body > #furtherInformation {
grid-area: infoBox;
-ms-grid-column: 3;
-ms-grid-column-span: 3;
-ms-grid-row: 3;
-ms-grid-row-span: 3;
margin: 1px;
background-color: #d2f3c6;
}
body > footer {
grid-area: footer;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row: 6;
-ms-grid-row-span: 6;
background-color: #99ee7a;
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
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;
}
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
body {
display: grid;
background-color: #ebf5d7;
grid-template-columns: 8% 77% 15%;
grid-row-gap: 5px;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main infoBox"
"footer footer footer";
}
body > header {
background-image: url("Bilder/view.png");
background-repeat: no-repeat;
padding: 80px;
margin-bottom: -8px;
}
#navs a{
font-size: 15px;
}
#externalLinks ul {
margin-left: -10px;
}
#externalLinks a {
font-size: 13px;
}
.dropdown:hover .dropdown-content {
left: 78px;
top: 238px;
}
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
body {
display: -ms-grid;
display: grid;
grid-row-gap: 5px;
background-color: #ebf5d7;
margin: 2px;
grid-template-columns: 11% 72% 17%;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main main"
"footer footer footer";
-ms-grid-columns: 11% 72% 17%;
-ms-grid-row: 120px 80px 5px 200px 110px 90px;
-ms-grid-gap: 5px;
}
body > header {
background-image: url("Bilder/view.png");
background-repeat: no-repeat;
padding: 50px;
margin-bottom: 1px;
}
.dropdown-content {
display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */
font-size: 12px;
position: absolute; /* die stellung folgt der Erste Link(li) */
background-color: #f1f1f1 ;
min-width: 82px; /* macht größer die Inneren Links */
box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe */
z-index: 1; /* Zeigen die Ordnung wie die Links gezeigt werden... */
}
#navs a{
font-size: 11px;
}
#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: 59px;
top: 180px;
}
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
body {
display: grid;
background-color: #ebf5d7;
font-size: 1.0833em;
grid-template-columns: 11% 80% 9%;
margin: 2px;
grid-template-areas:
"header header header"
"nav nav nav"
"linkBox main main"
"footer footer main";
}
#navs a{
font-size: 11px;
}
#externalLinks ul {
margin-left: -10px;
}
#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: 1px;
top: 230px;
}
.dropdown-content {
display: none; /* display wird ausgeschaltet ,aber erlaubt die anderen elemente, position ,background ,.... */
font-size: 12px;
position: absolute; /* die stellung folgt der Erste Link(li) */
background-color: #f1f1f1 ;
min-width: 72px; /* macht größer die Inneren Links */
box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.2); /* Bau ein Schatte und geben an dem Schatten Farbe */
z-index: 1; /* Zeigen die Ordnung wie die Links gezeigt werden... */
}
#img1 {float: left; margin: 1px; }
#copry a {text-decoration: none; margin-bottom: 1px;}
#copry p {font-size: 6px; margin-bottom: 0px; }
}
I have to test my Media Query on this Website , same emulators Netbook working with Mac as OS therefore with my Code can not gut to show them (i have Linux…) , can please anyone to say what to missing me , Thanks !
The easiest way to see your media query is to simply resize the browser window and watch your layout rearrange itself. If you want precise sizes like common phone/tablet widths, the developer tools in Chrome provide a very nice utility for that: https://developers.google.com/web/tools/chrome-devtools/device-mode/