.landing_columns { & > div { border-style: solid; border-color: black; border-width: 0; text-align: center; @media screen and (min-width: 48em) { border-width: 0 1px; padding: 1em 3em; &:first-child { text-align: right; border-left: 0; } &:last-child { text-align: left; border-right: 0; } a.login-button { margin: 2em 2em 0 0; } } } } @media only screen and (max-width: 800px) { .pure-u-7-12 { float: left; width: 100% !important; } .pure-u-5-12 { float: left; clear: both; width: 100% !important; } .pure-g { display: block !important; } .pure-u-5-12 .input-group { width: 100% !important; } // .pure-u-5-12 .col-xs-4 { // width: 100% !important; // } } a.login-button { font-size: 200%; } .full-table { width: 100%; } .landing-column { padding: 1em; } .columns-title { text-align: center; } .shame-percentage { text-align: right } .transaction { border-bottom: 1px solid #c7d0d5; padding: 15px 10px; font-size: 16px; color: rgb(45, 54, 59); .transaction-calendar { float: left; text-align: center; color: #adbac2; line-height: 1.1; margin-top: 0.125em; .transaction-day { font-size: 1.125em; display: block; } .transaction-month { font-size: 0.750em; text-transform: uppercase; display: block; } } .transaction-block { padding-left: 3.500em; .transaction-block-l { width: 75%; float: left; .transaction-message { margin: 0; color: #0072ae; font-size: 1em; text-transform: uppercase; } .transaction-issuer { display: inline-block; color: #90949c; font-size: 70%; } } .transaction-block-r { width: 25%; float: left; text-align: right; } } } .request { h4 { margin: 0; color: #0072ae; font-size: 1em; text-transform: uppercase; } } .notification ,.request { border-top: 1px solid #c7d0d5; padding: 15px 10px; .actions { text-align: right; } }