.show-page, .broadcast-page { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 5px; } /* Primary / Head */ .broadcast-page-header, .show-page-header { margin: 24px 5px 0 5px; } .broadcast-page-backbutton, .show-page-backbutton { display: inline-block; height: 15px; padding: 4px 0 4px 16px; background: no-repeat url('/static/images/arrow_large_left.png'); background-size: 8px 15px; background-position-y: 7px; background-position-x: left; margin: 0 2em 1em 0; } .show-page-head, .show-page-row, .broadcast-page-head, .broadcast-page-row { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .show-page-head-right, .broadcast-page-head-right { width: calc(100% * 2 / 3 - 5px); /* magically works */ margin-bottom: 15px; } .show-page-head__has-left .show-page-head-right, .broadcast-page-head__has-left .broadcast-page-head-right, .show-page__primary, .broadcast-page__primary { width: calc((100% / 3 * 2) - 10px); /* Two thirds */ padding-left: 20px; } .show-page-head-left, .broadcast-page-head-left { width: calc((100% / 3) - 10px); /* One third */ margin-bottom: 15px; } .show-page__secondary, .broadcast-page__secondary { width: calc((100% / 3) - 10px); /* One third */ } .show-image, .broadcast-image { width: 100%; height: auto; display: block; } /* Lower part */ .show-infos, .broadcast-infos { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .show-infos__show-comments, .show-infos__show-playlist, .broadcast-infos__show-list, .broadcast-infos__show-description { width: calc(50% - 10px); } /* MQs */ @media (max-width: 960px) { .show-page__primary, .broadcast-page__primary { padding-left: 10px; } .show-page__primary, .show-page__secondary, .broadcast-page__primary, .broadcast-page__secondary { width: calc(50% - 5px); } .show-page-head-left, .broadcast-page-head-left { width: calc(50% - 5px); } .show-page-head-right, .broadcast-page-head-right { width: 100%; } .show-page-head__has-left .show-page-head-right, .broadcast-page-head__has-left .broadcast-page-head-right { width: calc(50% - 5px); padding-left: 10px; } .show-infos, .broadcast-infos { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .show-infos__show-playlist, .show-infos__show-comments, .broadcast-infos__show-list, .broadcast-infos__show-description { width: 100%; } .show-infos__show-playlist, .broadcast-infos__show-list { height: auto; order: 1; } } @media (max-width: 567px) { .show-page-head, .show-page-row, .broadcast-page-head, .broadcast-page-row { display: block; } .show-page__primary, .broadcast-page__primary { padding-left: 0; } .show-page__primary, .show-page__secondary, .broadcast-page__primary, .broadcast-page__secondary { width: 100%; } .show-page__secondary, .broadcast-page__secondary { order: 1; margin-top: 0px; } .show-page-head-left, .show-page-head-right, .show-page-head__has-left .show-page-head-right, .broadcast-page-head-left, .broadcast-page-head-right, .broadcast-page-head__has-left .broadcast-page-head-right { padding-left: 0; width: 100%; } .show-infos__show-list .broadcast-show-list, .broadcast-infos__show-list .broadcast-show-list { height: 196px; } }