.pizza_modal_card { display: block; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 100; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ .dialog { @media (max-width:760px) { height: 533px; width: 400px; margin: 0 auto; } @media (min-width:780px) { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 533px; width: 900px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } /* Modal Content */ .content { background-color: #fefefe; margin: auto; @media (max-width:760px) { } @media (min-width:780px) { border-radius: 20px; } /*border: 1px solid #888;*/ .body{ height: 100%; flex-wrap: wrap; display: flex; .left{ margin: 0 auto; float: left; position: static; display: flex; justify-content: center; /*Центрирование по горизонтали*/ align-items: center; /*Центрирование по вертикали */ width: 400px; .img{ text-align: center; height: 100%; display: grid;; justify-content: center; /*Центрирование по горизонтали*/ align-items: center; /*Центрирование по вертикали */ } } .right{ background: #F7F7F7; height: 500px; display: table; float: left; position: static; @media (max-width:760px) { width: 100vw; } @media (min-width:780px) { border-radius: 20px; width: 400px; } .header{ height: 450px; letter-spacing: 0.02em; .title{ font-size: 20px; line-height: 24px; color: #252A48; margin: 10px 10px 10px 15px; } .feature{ font-size: 13px; line-height: 15px; margin: 10px 10px 10px 15px; color: #8E8E93; } .description{ font-size: 13px; line-height: 15px; color: #252A48; margin: 10px 10px 10px 15px; } /* Блок переключения */ @import 'block_selector'; @import 'ingredients'; } } } } } .modal_footer{ display: table; margin: 0 auto; margin-top: 15px; } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } } .position_product{ padding-top: 100px; /* padding-top: 100px; right: 0; left: unset !important; position: absolute;*/ } @media (max-width: 940px) { .pizza_modal_card { height: 100vh; width: 100vw; } }