bendtherules/is-nifty-open
1
0
Fork 0
mirror of https://github.com/bendtherules/is-nifty-open.git synced 2026-08-18 22:02:57 +00:00
Code Issues 20 Packages Projects Releases Wiki Activity

Use media query width instead of device-width

Browse Source
This commit is contained in:
bendtherules
2018-03-12 15:51:12 +05:30
parent 472d197316
commit a6623aa2cf
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Components/IsNiftyOpenApp/App.css
+12 -6
View File
@@ -1,41 +1,47 @@
/* Make responsive by adjusting master text-size em */
@media screen and (min-device-width: 1441px) {
@media screen and (min-width: 1441px) {
.App {
font-size: 2.25em;
}
}
@media screen and (min-device-width: 1025px) and (max-device-width: 1440px) {
@media screen and (min-width: 1025px) and (max-width: 1440px) {
.App {
font-size: 1.5em;
}
}
@media screen and (min-device-width: 769px) and (max-device-width: 1024px) {
@media screen and (min-width: 769px) and (max-width: 1024px) {
.App {
font-size: 1.2em;
}
}
@media screen and (min-device-width: 601px) and (max-device-width: 768px) {
@media screen and (min-width: 601px) and (max-width: 768px) {
.App {
font-size: 0.9em;
}
}
@media screen and (min-device-width: 426px) and (max-device-width: 600px) {
@media screen and (min-width: 426px) and (max-width: 600px) {
.App {
font-size: 0.6em;
}
}
@media screen and (min-device-width: 320px) and (max-device-width: 425px) {
@media screen and (min-width: 321px) and (max-width: 425px) {
.App {
font-size: 0.45em;
}
}
@media screen and (max-width: 320px){
.App {
font-size: 0.3em;
}
}
.App {
width: 100%;
height: 100%;