smiuser/hpos-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add screen sizes

Browse Source
This commit is contained in:
prisar
2023-07-07 05:17:03 +05:30
parent 7644bd9046
commit ac81a72bb6
1 changed files with 162 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/App.css
View File

@@ -38,6 +38,7 @@ body {
font-weight: 900;
}
@media screen and (min-width: 320px) {
.numeric-card {
height: 200px;
width: 300px;
@@ -72,9 +73,88 @@ body {
flex-direction: column;
}
div.chart {
.cards-row {
margin: 50px;
display: flex;
flex-direction: column;
}
}
@media screen and (min-width: 500px) {
.numeric-card {
height: 200px;
width: 300px;
/* border: 1px solid; */
padding: 20px;
/* background-color: #fb9261; */
box-shadow: 5px 10px 8px 10px #888888;
border-radius: 15px;
margin: 20px;
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
}
.card-title {
color: black;
font-size: 1em;
font-weight: 600;
font-family: sans-serif;
font-size: 0.7em;
}
.card-data {
color: black;
font-size: 4em;
font-family: sans-serif;
}
.cards-container {
align-items: center;
display: flex;
flex-direction: column;
}
.cards-row {
margin: 50px;
display: flex;
flex-direction: column;
}
}
@media (min-width: 900px) {
.numeric-card {
height: 150px;
width: 200px;
/* border: 1px solid; */
padding: 20px;
/* background-color: #fb9261; */
box-shadow: 5px 10px 8px 10px #888888;
border-radius: 15px;
margin: 20px;
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
}
.card-title {
color: black;
font-size: 1em;
font-weight: 600;
font-family: sans-serif;
}
.card-data {
color: black;
font-size: 4em;
font-family: sans-serif;
}
.cards-container {
align-items: center;
display: flex;
flex-direction: column;
}
.cards-row {
@@ -82,6 +162,54 @@ div.chart {
display: flex;
flex-direction: row;
}
}
@media screen and (min-width: 1200px) {
.numeric-card {
height: 200px;
width: 300px;
/* border: 1px solid; */
padding: 20px;
/* background-color: #fb9261; */
box-shadow: 5px 10px 8px 10px #888888;
border-radius: 15px;
margin: 20px;
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
}
.card-title {
color: black;
font-size: 1em;
font-weight: 600;
font-family: sans-serif;
}
.card-data {
color: black;
font-size: 4em;
font-family: sans-serif;
}
.cards-container {
align-items: center;
display: flex;
flex-direction: column;
}
.cards-row {
margin: 50px;
display: flex;
flex-direction: row;
}
}
div.chart {
font-family: sans-serif;
font-size: 0.7em;
}
div.bar {
background-color: DarkRed;
@@ -92,4 +220,3 @@ div.bar {
margin-bottom: 2px;
text-align: right;
}