diff --git a/client/src/components/Charts/OrgPieChart.js b/client/src/components/Charts/OrgPieChart.js
index 9131d030e..d55950ee7 100644
--- a/client/src/components/Charts/OrgPieChart.js
+++ b/client/src/components/Charts/OrgPieChart.js
@@ -98,8 +98,8 @@ export class OrgPieChart extends Component {
const { classes } = this.props;
return (
-
-
+
+
{
boxShadow: dark ? '1px 2px 2px rgb(215, 247, 247)' : undefined
},
count: {
- marginTop: '55%',
- color: dark ? '#ffffff' : undefined
+ color: dark ? '#ffffff' : undefined,
+ [theme.breakpoints.down('md')]: {
+ marginTop: '35%'
+ },
+ [theme.breakpoints.up('md')]: {
+ marginTop: '55%'
+ }
},
statistic: {
display: 'block',
@@ -65,8 +70,13 @@ const styles = theme => {
height: '100%',
width: '25%',
textAlign: 'center',
- fontSize: '18pt',
- color: dark ? '#ffffff' : '#000000'
+ color: dark ? '#ffffff' : '#000000',
+ [theme.breakpoints.down('md')]: {
+ fontSize: '8pt'
+ },
+ [theme.breakpoints.up('md')]: {
+ fontSize: '18pt'
+ }
},
vdivide: {
'&::after': {
@@ -80,8 +90,14 @@ const styles = theme => {
},
avatar: {
justifyContent: 'center',
- marginLeft: '60%',
- marginTop: '65%'
+ [theme.breakpoints.down('md')]: {
+ marginLeft: '25%',
+ marginTop: '15%'
+ },
+ [theme.breakpoints.up('md')]: {
+ marginLeft: '60%',
+ marginTop: '65%'
+ }
},
node: {
color: dark ? '#183a37' : '#21295c',
@@ -107,6 +123,11 @@ const styles = theme => {
},
center: {
textAlign: 'center'
+ },
+ pie: {
+ [theme.breakpoints.up('md')]: {
+ marginLeft: '25%'
+ }
}
};
};
@@ -281,7 +302,9 @@ export class DashboardView extends Component {
Transactions by Organization
-
+
+
+