/** * user-registration-smallscreen.css * Optimises the default User Registration frontend layout when viewed on smaller screens. */ /** * Imports */ /** * Variables */ /** * Grid breakpoints * * Define the minimum dimensions at which your layout will change, * adapting to different screen sizes, for use in media queries. **/ /** * Grid containers * * Define the maximum width of `.ur-container` for different screen sizes. * scss-docs-start container-max-widths **/ /** Minimum breakpoint width. Null for the smallest (first) breakpoint. * * >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) * 576px **/ /** * Variables */ /** * Grid breakpoints * * Define the minimum dimensions at which your layout will change, * adapting to different screen sizes, for use in media queries. **/ /** * Grid containers * * Define the maximum width of `.ur-container` for different screen sizes. * scss-docs-start container-max-widths **/ /** * Media of at least the minimum breakpoint width. No query for the smallest breakpoint. * Makes the @content apply to the given breakpoint and wider. **/ /** * Grid system * * Generate semantic grid columns with these mixins. **/ /** * _mixins.scss * User Registration Mixins */ /** * Style begins **/ @media screen and (max-width: 768px) { .ur-frontend-form .ur-form-row { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } .ur-frontend-form .ur-form-row .ur-form-grid { width: 100% !important; margin-bottom: 20px; } .ur-frontend-form .ur-form-row .ur-form-grid:nth-child(1n+2) { border-left: 1px solid #e1e1e1; } .ur-frontend-form .ur-form-row .ur-form-grid:last-child { margin-bottom: 0; border-left: 0 none; } } @media screen and (max-width: 600px) { #user-registration .user-registration-MyAccount-navigation ul { display: block; } #user-registration .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link { display: block; } }