Как подстроить баннер ПОС госуслуг под сайт

голоса: 0

Здравствуйте. Подскажите пожалуйста как подстроить банер гос услуг так чтобы он не занимал пол страницы, а был наподобие других блоков. В общем сделать его размер таким же как у других блоков.

  <script src='https://pos.gosuslugi.ru/bin/script.min.js'></script> <style> #js-show-iframe-wrapper{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-width:293px;max-width:100%;background:linear-gradient(138.4deg,#38bafe 26.49%,#2d73bc 79.45%);color:#fff;cursor:pointer}#js-show-iframe-wrapper .pos-banner-fluid *{box-sizing:border-box}#js-show-iframe-wrapper .pos-banner-fluid .pos-banner-btn_2{display:block;width:240px;min-height:56px;font-size:18px;line-height:24px;cursor:pointer;background:#0d4cd3;color:#fff;border:none;border-radius:8px;outline:0}#js-show-iframe-wrapper .pos-banner-fluid .pos-banner-btn_2:hover{background:#1d5deb}#js-show-iframe-wrapper .pos-banner-fluid .pos-banner-btn_2:focus{background:#2a63ad}#js-show-iframe-wrapper .pos-banner-fluid .pos-banner-btn_2:active{background:#2a63ad}@-webkit-keyframes fadeInFromNone{0%{display:none;opacity:0}1%{display:block;opacity:0}100%{display:block;opacity:1}}@keyframes fadeInFromNone{0%{display:none;opacity:0}1%{display:block;opacity:0}100%{display:block;opacity:1}}@font-face{font-family:LatoWebLight;src:url(https://pos.gosuslugi.ru/bin/fonts/Lato/fonts/Lato-Light.woff2) format("woff2"),url(https://pos.gosuslugi.ru/bin/fonts/Lato/fonts/Lato-Light.woff) format("woff"),url(https://pos.gosuslugi.ru/bin/fonts/Lato/fonts/Lato-Light.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:LatoWeb;src:url(https://pos.gosuslugi.ru/bin/fonts/Lato/fonts/Lato-Regular.woff2) format("woff2"),url(https://pos.gosuslugi.ru/bin/fonts/Lato/fonts/Lato-Regular.woff) format("woff"),url(https://pos.gosuslugi.ru/bin/fonts/Lato/fonts/Lato-Regular.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:LatoWebBold;src:url(https://pos.gosuslugi.ru/bin/fonts/Lato/fonts/Lato-Bold.woff2) format("woff2"),url(https://pos.gosuslugi.ru/bin/fonts/Lato/fonts/Lato-Bold.woff) format("woff"),url(https://pos.gosuslugi.ru/bin/fonts/Lato/fonts/Lato-Bold.ttf) format("truetype");font-style:normal;font-weight:400} </style> <style> #js-show-iframe-wrapper .bf-1{position:relative;display:grid;grid-template-columns:var(--pos-banner-fluid-1__grid-template-columns);grid-template-rows:var(--pos-banner-fluid-1__grid-template-rows);width:100%;max-width:1060px;font-family:LatoWeb,sans-serif;box-sizing:border-box}#js-show-iframe-wrapper .bf-1__decor{grid-column:var(--pos-banner-fluid-1__decor-grid-column);grid-row:var(--pos-banner-fluid-1__decor-grid-row);padding:var(--pos-banner-fluid-1__decor-padding);background:url(https://pos.gosuslugi.ru/bin/banner-fluid/1/banner-fluid-bg-1.svg) var(--pos-banner-fluid-1__decor-bg-position) no-repeat;background-size:var(--pos-banner-fluid-1__decor-bg-size)}#js-show-iframe-wrapper .bf-1__logo-wrap{display:flex;flex-direction:column;align-items:flex-end}#js-show-iframe-wrapper .bf-1__logo{width:128px}#js-show-iframe-wrapper .bf-1__slogan{font-family:LatoWebBold,sans-serif;font-size:var(--pos-banner-fluid-1__slogan-font-size);line-height:var(--pos-banner-fluid-1__slogan-line-height);color:#fff}#js-show-iframe-wrapper .bf-1__content{padding:var(--pos-banner-fluid-1__content-padding)}#js-show-iframe-wrapper .bf-1__description{display:flex;flex-direction:column;margin-bottom:24px}#js-show-iframe-wrapper .bf-1__text{margin-bottom:12px;font-size:24px;line-height:32px;font-family:LatoWebBold,sans-serif;color:#fff}#js-show-iframe-wrapper .bf-1__text_small{margin-bottom:0;font-size:16px;line-height:24px;font-family:LatoWeb,sans-serif}#js-show-iframe-wrapper .bf-1__btn-wrap{display:flex;align-items:center;justify-content:center} </style > <div id='js-show-iframe-wrapper'> <div class='pos-banner-fluid bf-1'> <div class='bf-1__decor'> <div class='bf-1__logo-wrap'> <img class='bf-1__logo' src='https://pos.gosuslugi.ru/bin/banner-fluid/gosuslugi-logo.svg' alt='Госуслуги' /> <div class='bf-1__slogan'>Решаем вместе</div > </div > </div > <div class='bf-1__content'> <div class='bf-1__description'> <span class='bf-1__text'> Не убран снег, яма на дороге, не горит фонарь? </span > <span class='bf-1__text bf-1__text_small'> Столкнулись с проблемой&nbsp;— сообщите о ней! </span > </div > <div class='bf-1__btn-wrap'> <!-- pos-banner-btn_2 не удалять; другие классы не добавлять --> <button class='pos-banner-btn_2' type='button' >Сообщить о проблеме </button > </div > </div > </div > </div > <script> (function(){ "use strict"; function ownKeys(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);if(t)n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable});o.push.apply(o,n)}return o}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};if(t%2)ownKeys(Object(o),true).forEach(function(t){_defineProperty(e,t,o[t])});else if(Object.getOwnPropertyDescriptors)Object.defineProperties(e,Object.getOwnPropertyDescriptors(o));else ownKeys(Object(o)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))})}return e}function _defineProperty(e,t,o){if(t in e)Object.defineProperty(e,t,{value:o,enumerable:true,configurable:true,writable:true});else e[t]=o;return e}var POS_PREFIX_1="--pos-banner-fluid-1__",posOptionsInitial={"grid-template-columns":"100%","grid-template-rows":"310px auto","decor-grid-column":"initial","decor-grid-row":"initial","decor-padding":"30px 30px 0 30px","decor-bg-position":"center calc(100% - 10px)","decor-bg-size":"75% 75%","content-padding":"0 30px 30px 30px","slogan-font-size":"24px","slogan-line-height":"32px"},setStyles=function(e,t){Object.keys(e).forEach(function(o){t.style.setProperty(POS_PREFIX_1+o,e[o])})},removeStyles=function(e,t){Object.keys(e).forEach(function(e){t.style.removeProperty(POS_PREFIX_1+e)})};function changePosBannerOnResize(){var e=document.documentElement,t=_objectSpread({},posOptionsInitial),o=document.getElementById("js-show-iframe-wrapper"),n=o?o.offsetWidth:document.body.offsetWidth;if(n>500)t["grid-template-columns"]="min-content 1fr",t["grid-template-rows"]="100%",t["decor-grid-column"]="2",t["decor-grid-row"]="1",t["decor-padding"]="30px 30px 30px 0",t["decor-bg-position"]="calc(30% - 10px) calc(72% - 2px)",t["decor-bg-size"]="calc(23% + 150px)",t["content-padding"]="30px";if(n>800)t["decor-bg-position"]="calc(38% - 50px) calc(6% - 0px)",t["decor-bg-size"]="420px",t["slogan-font-size"]="32px",t["slogan-line-height"]="40px";if(n>1020)t["decor-bg-position"]="calc(30% - 28px) calc(0% - 40px)",t["decor-bg-size"]="620px";setStyles(t,e)}changePosBannerOnResize(),window.addEventListener("resize",changePosBannerOnResize),window.onunload=function(){var e=document.documentElement;window.removeEventListener("resize",changePosBannerOnResize),removeStyles(posOptionsInitial,e)}; })() </script> <script>Widget("https://pos.gosuslugi.ru/form", 266746)</script> 

 

Адрес сайта shkola-iskatelej.info/
Закрыто с пометкой: Вопрос решен!
| Автор: | Категория: Дизайн сайта
Закрыт | | Автор: Yuri_Geruk

Ответов: 1

Голоса: +1

Пропишите в таблицу стилей CSS стили:

div[id="js-show-iframe-wrapper"] {max-width: 200px!important;min-width: 200px!important;}

это поможет.

| Автор:
Благодарю за ответ! Подвопрос. Можно ли как то ограничить высоту этого баннера при фиксированной ширине блоков?
Никита Христолюбов #2,
Нельзя, у него фиксированная высота 664 пикселя, уменьшить нельзя так как тогда скрываются элементы баннера.
Yuri_Geruk,
Большое спасибо за ответы!
...