order details page styles

by Sreeraj Saseendran

HTML

<link rel="stylesheet" href="https://staging3.zimmermannwear.com/static/version1575988717/frontend/tryzens/zimmermann/en_AU/css/styles.css">
<div class="page-wrapper"><div class="header__main-container">
    <div class="header__container js-header__container">
        <header class="header js-header">
            <div class="container container--header">
                <div class="header__wrapper">
                    
                    <div class="header__buttons header__buttons__left">
                        <a class="header-button header-button--reset-margin hide--xs hide--s" href="https://staging3.zimmermannwear.com/store/locate-store/" aria-label="Store Locator">
    <svg aria-hidden="true" focusable="false" class="icon header-button__icon header-button__icon--store">
        <use xlink:href="https://staging3.zimmermannwear.com/static/version1575988717/frontend/tryzens/zimmermann/en_AU//images/icons-sprite.svg#z-pin-stroke"></use>
    </svg>
</a>                        <a class="header-button hide--xs hide--s" href="https://staging3.zimmermannwear.com/contactus/" aria-label="Contact Us">
    <svg aria-hidden="true" focusable="false" class="icon header-button__icon">
        <use xlink:href="https://staging3.zimmermannwear.com/static/version1575988717/frontend/tryzens/zimmermann/en_AU//images/icons-sprite.svg#phone"></use>
    </svg>
</a>
                        
<button class="header-button hide--xs hide--s" aria-label="Newsletter" data-bind="scope: 'newsletter'" id="newsletter_header">
    <svg aria-hidden="true" focusable="false" class="icon header-button__icon">
        <use xlink:href="https://staging3.zimmermannwear.com/static/version1575988717/frontend/tryzens/zimmermann/en_AU//images/icons-sprite.svg#envelope"></use>
    </svg>
</button>


                    </div>

                    
                    <div class="header__buttons">
                        <div class="header__account">
                            <div...

CSS

@media print{.o-layout{display:block;margin:0;padding:0;list-style:none;font-size:0;letter-spacing:0;margin-left:-5px}.o-layout__item{box-sizing:border-box;display:inline-block;vertical-align:top;width:100%;font-size:11px;font-size:1rem;padding-left:5px}.o-layout__item--debug{padding-top:20px;padding-bottom:20px;background:pink;margin-bottom:15px}.o-layout__item--h2{font-size:12px}.o-layout__item-normal{box-sizing:border-box;display:inline-block;vertical-align:top;width:100%}.o-layout--flush{margin-left:0;margin-right:0}.o-layout--flush>.o-layout__item{padding-left:0;padding-right:0}.o-layout--small-gutters{margin-left:-2px}.o-layout--small-gutters>.o-layout__item{padding-left:2px}.o-layout--middle>.o-layout__item{vertical-align:middle}.o-layout--bottom>.o-layout__item{vertical-align:bottom}.o-layout--stretch{display:-webkit-box;display:flex;flex-wrap:wrap}.o-layout--stretch>.o-layout__item{display:-webkit-box;display:flex}.o-layout--stretch>.o-layout__item>div{-webkit-box-flex:1;flex:1 1 auto}}@media print and (-ms-high-contrast:none){.o-layout--stretch-item-bottom>.o-layout__item{-webkit-box-align:start;align-items:flex-start;align-content:flex-start}}@media...

JavaScript

window.print();