gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: center certificates vertically when viewed on large scree… (#37427)

Browse Source 
* fix: center certificates vertically when viewed on large screens

* adjust alignment for all screen sizes

* change height to min-height
This commit is contained in:
Derryk Boyd
2019-10-22 09:44:04 -06:00
committed by mrugesh
parent 5b1ee9c177
commit 3483a04ba1
2 changed files with 67 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/client-only-routes/ShowCertification.js
View File

@ -104,6 +104,7 @@ class ShowCertification extends Component {
completionTime completionTime
} = cert; } = cert;
return ( return (
<div className='certificate-outer-wrapper'>
<Grid className='certificate-wrapper certification-namespace'> <Grid className='certificate-wrapper certification-namespace'>
<Row> <Row>
<header> <header>
@ -167,6 +168,7 @@ class ShowCertification extends Component {
</footer> </footer>
</Row> </Row>
</Grid> </Grid>
</div>
); );
} }
} }

7
client/src/pages/certification.css
View File

@ -30,6 +30,13 @@
font-family: 'Sax Mono', monospace; font-family: 'Sax Mono', monospace;
} }
/* center the certificate vertically */
.certificate-outer-wrapper {
display: flex;
align-items: center;
min-height: 100vh;
}
.certification-namespace header { .certification-namespace header {
width: 100%; width: 100%;
height: 140px; height: 140px;