.primer-layout p label { float: left; margin-right: 12px; } .primer-layout p span.clear { content: ''; clear: both; display: block; } .primer-layout-wrap ul { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; margin: 0; } .primer-layout-wrap ul li { margin: 0.3em 0.3em; padding: 0; } .primer-layout-wrap ul li.disabled { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)"; filter: alpha(opacity=35); opacity: 0.35; } .primer-layout-wrap ul li span { display: none; } .primer-layout-wrap ul li img { width: -webkit-calc(100% - 0.3em - 12px); width: calc(100% - 0.3em - 12px); height: auto; padding: 6px; } .primer-layout-wrap ul li label { display: block; position: relative; margin-left: 0; } .primer-layout-wrap ul li label > input { visibility: hidden; position: absolute; } .primer-layout-wrap ul li label > input + img { border: 3px solid transparent; } .primer-layout-wrap ul li.active label > input + img { cursor: pointer; } .primer-layout-wrap ul li.active label > input:checked + img { border-color: #1e8cbe; } .primer-layout-wrap ul li.disabled label > input + img { cursor: default; } #side-sortables .primer-layout-wrap ul, #customize-control-layout .primer-layout-wrap ul { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } #side-sortables .primer-layout-wrap ul li, #customize-control-layout .primer-layout-wrap ul li { -webkit-flex-basis: -webkit-calc(25% - 0.6em); -ms-flex-preferred-size: calc(25% - 0.6em); flex-basis: calc(25% - 0.6em); } @media only screen and (max-width: 850px) { .primer-layout-wrap ul { display: inline-block; } .primer-layout-wrap ul li { float: none; width: 100%; padding: 0.5em 0 !important; } .primer-layout-wrap ul li span { display: inline-block; } .primer-layout-wrap ul li img { display: none; } .primer-layout-wrap ul li label { margin-left: 24px; } .primer-layout-wrap ul li label > input { visibility: visible; position: relative; } }