client/assets/css/responsive.css
/************ Non-Mobile First Method ************/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1290px) {
.container {
width: 100%;
}
}
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
.main-showcase-content {
display: flex;
flex-direction: column;
align-items: center;
}
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
.main .main-content article button {
padding: 10px 18px;
}
}
/* Medium Devices, Tablets */
@media only screen and (max-width : 768px) {
.toast {
max-width: 35%;
padding: 5px;
}
.card {
padding-bottom: 1px;
margin-bottom: 10px;
}
.main .header {
background: none;
margin-top: 0;
}
.main .header h2 {
letter-spacing: -3px;
}
.header:first-letter {
border: 0 none;
}
#logo {
padding: 5px;
}
#logo img {
height: 60px;
width: 60px;
}
.open-slide {
visibility: visible;
}
.side-nav li {
font-weight: 200;
}
.nav-links ul {
display: none;
}
.hero-copy {
margin-left: 30px;
max-width: 400px;
}
.hero-copy h1 {
font-size: 50px;
margin: 0;
}
.hero-copy p {
font-size: 16px;
margin-top: 5px;
}
.main section header {
margin: 80px auto;
}
.main .landing {
background: #ffffff;
height: 500px;
text-align: center;
}
.main .landing article {
padding: 20px;
max-width: 100%;
margin: 0;
}
.main-showcase .why-us {
font-size: 20px !important;
}
/*Login*/
.auth-page {
display: block;
}
.auth-page .nav {
display: inline-block;
}
.auth-page .banner {
background: none;
padding: 22px 22px 0;
}
.auth-page .banner h1 {
font-size: 24px;
letter-spacing: -1px;
}
.back {
visibility: hidden;
}
.form {
width: 80%;
}
/*Admin*/
#ad-nav {
padding: 5px 10px;
}
#ad-nav #avatar {
display: none;
}
#ad-nav #avatar::after {
display: none;
}
.ad-modal {
right: 10%;
bottom: 50%;
left: 10%;
padding: 10px;
}
.ad-modal .modal-content {
padding-top: 8vh;
}
.ad-modal button {
padding: 8px 30px;
}
.ad-main {
display: block;
margin-bottom: 50px;
}
.ad-main .card-content img {
width: 30%;
}
.ad-main .card button {
width: 100%;
}
.ad-main aside {
display: none;
}
.ad-main-showcase {
box-sizing: border-box;
}
.ad-main-content {
display: block;
}
/*All accounts*/
.ad-main-content table {
font-size: 14px;
width: 100%;
}
.ad-main-content table .actions {
display: none;
}
.ad-main-content table .ellipsis {
cursor: pointer;
display: block;
border: 0 none;
position: relative;
}
.ad-main-content table th, .ad-main-content table td {
padding: 8px 10px;
}
.ad-main-content table button, .ad-main-content section button {
font-size: 14px;
padding: 4px 8px;
}
.ad-main-content .transaction-form {
width: 80%;
}
.ad-main-content .new-user-form .form-row {
display: block;
}
/*Account opening page / Contact /Help*/
.main .account, .main .contact-us, .main .about-us, .main .help {
margin: 0 auto;
width: 90%;
}
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
#logo {
padding: 3px;
}
#logo img {
height: 50px;
width: 50px;
}
.hero-landing {
background-image: url('../img/hero_mobile.jpg');
}
nav {
padding: 10px !important;
}
.hero-copy {
background: none;
max-width: 100%;
display: flex;
flex-direction: column;
height: 100%;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
}
.hero-copy h1 {
color: wheat;
font-size: 42px;
}
.hero-copy p {
color: #fff;
font-size: 14px;
}
.main section header {
font-size: 30px;
}
.main .landing {
text-align: center;
}
.main-showcase .why-us {
font-size: 18px !important;
max-width: 100%;
}
/*Admin*/
.ad-modal {
right: 5%;
left: 5%;
padding: 5px;
}
.ad-modal .actions {
padding-top: 3vh;
}
.ad-modal button {
font-size: 14px;
padding: 6px 20px;
}
.ad-main-content table {
font-size: 12px;
}
.ad-main-content table th, .ad-main-content table td {
padding: 4px 6px;
}
.ad-main-content table button, .ad-main-content section button {
font-size: 12px;
padding: 2px 6px;
}
.ad-main-content table th:last-child, .ad-main-content table td:last-child {
padding-left: 8px;
}
.ad-main-content .transaction-form {
width: 100%;
}
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}