Add media queries

This commit is contained in:
2019-05-20 16:51:43 +05:30
parent 0436a6b0ce
commit ecb03a32f6

View File

@@ -7,6 +7,12 @@ body{
padding:0.5rem; padding:0.5rem;
/*display: flex;*/ /*display: flex;*/
} }
@media only screen and (max-width: 750px){
.container{
padding:0;
}
}
.navbar-container{ .navbar-container{
/* Primary color */ /* Primary color */
background-color: #2196f3; background-color: #2196f3;
@@ -16,12 +22,25 @@ body{
.content{ .content{
padding:0.5rem; padding:0.5rem;
border-radius: 0.25rem; border-radius: 0.25rem;
width:50%; width:75%;
max-width: 70rem;
margin:0.5rem auto 0.5rem auto; margin:0.5rem auto 0.5rem auto;
background-color: aliceblue; background-color: aliceblue;
} }
@media only screen and (min-width: 750px){
.content{
min-width:40rem;
}
}
@media only screen and (max-width: 750px){
.content{
width: auto;
border-radius: 0;
margin-top:0;
}
}
.nav-bottom-container{ .nav-bottom-container{
position: fixed; position: fixed;
bottom:0; bottom:0;
@@ -30,7 +49,6 @@ body{
.nav-bottom{ .nav-bottom{
background-color:aliceblue; background-color:aliceblue;
z-index:2; z-index:2;
padding:0.5rem; padding:0.5rem;
height: 1.5rem; height: 1.5rem;
@@ -42,8 +60,8 @@ body{
text-align: right; text-align: right;
} }
.nav-bottom-button{ .nav-bottom-button{
margin-bottom: 0.5rem; margin-bottom: 1rem;
margin-right:0.5rem; margin-right:1rem;
margin-left: auto; margin-left: auto;
width:4.5rem; width:4.5rem;
height:4.5rem; height:4.5rem;