18 февраля 2017 в 5:08
Установил 3 виджета в левый сайдбар, мне надо чтобы они занимали всю площадь сайдбара. Ширину сайдбара установл в самой теме как 25%.
В параметрах виджетов в ширине указал "auto". В итогде виджет Вконтакте нормально отображается во всю площаь и без прокрутки. Виджет Фэйсбук тоже занимает всю площадь, но в нем появляется горизонтальная прокрутка. А вот Гугл+ выезжает за пределы сайдбара.
Если ширину виджета поставить 27%, то Вконтакте нормально, Фэйсбук тоже нормально и без прокрутки уже, а вот Гугл+ тоже нормально, но лишь при определенном разрешении (могу лишь сказать за свое 1280x1024). Вот при 1280x1024 нормально. Но если смотреть с мобильного (1280x720), то он занимает примерно 80% площади сайдбара. Вконтакте и Фэйсбук при 1280x720 нормально.
Пробовал оборачивать их в div и в css указывал width 100%, auto. !important - это все не помогает для Фэйсбук (появляется горизонтальная прокрутка) и Гугл+ (выезжает за границы сайдбара).
Нашел в шаблоне записи, которые отвечают за ширину. Может здесь надо что-нибудь подправить, чтобы остальные виджеты занимали всю ширину сайдбара. Такое впечателение, что какая-то недаработка в шаблоне чтоли. Почему на 25% не работает совсем, на 27% работает наполовину? А Вконтакте всегда работает. На всякий случай весь код скопирую:
[user=media]media[/user] only screen and (min-width:321px) and (max-width:480px) {
#page-wrapper {width:100%}
#sidebar-first,#sidebar-second {float:none;clear:both;display:block;width:100%;margin-left:0;margin-right:0}
#top-columns .column-block-wrapper {width: 100% !important; margin-top: 1em;}
#top-columns .column-block-wrapper .column-block {height: auto ; margin: 0 !important;}
#bottom-columns .column-block-wrapper {width: 100% !important; margin-top: 1em;}
#bottom-columns .column-block-wrapper .column-block {height: auto ; margin: 0 !important;}
#footer-columns .column-block-wrapper {width: 100% !important; margin-top: 1em;}
#footer-columns .column-block-wrapper .column-block {height: auto ; margin: 0 !important;}
}
/* tablet_portrait one_col_vert */
[user=media]media[/user] only screen and (min-width:481px) and (max-width:768px) {
#page-wrapper {width:100%}
.two-sidebars #content,.one-sidebar #content,#sidebar-first,#sidebar-second {margin-left: 0; margin-right: 0}
#sidebar-first {width: 50%}
.one-sidebar #sidebar-first {width: 100%;}
#sidebar-second {width: 50%}
#sidebar-first,#sidebar-second {overflow: hidden; margin-top: 20px; float: left; clear: none}
#sidebar-first .section {margin-right: 5px; margin-left: 0;}
.one-sidebar #sidebar-first .section {margin-right: 0; margin-left: 0;}
#sidebar-second .section {margin-right: 0; margin-left: 5px;}
#top-columns .column-block-wrapper {width: 100% !important; margin-top: 1em;}
#top-columns .column-block-wrapper .column-block {height: auto ; margin: 0 !important;}
#bottom-columns .column-block-wrapper {width: 100% !important; margin-top: 1em;}
#bottom-columns .column-block-wrapper .column-block {height: auto ; margin: 0 !important;}
#footer-columns .column-block-wrapper {width: 100% !important; margin-top: 1em;}
#footer-columns .column-block-wrapper .column-block {height: auto ; margin: 0 !important;}
}
/* tablet_landscape three_col_grail */
[user=media]media[/user] only screen and (min-width:769px) and (max-width:1024px) {
#page-wrapper {width:100%}
.two-sidebars #content .section {margin-left: 20%; margin-right: 20%}
.one-sidebar #content .section {margin-left: 20%;}
.sidebar-second #content .section {margin-left: 0; margin-right: 20%;}
#sidebar-first .section {margin-left: 0; margin-right: 10px;}
#sidebar-second .section {margin-right: 0; margin-left: 10px;}
#sidebar-first {width: 20%; margin-left: -100%}
#sidebar-second {width: 20%; margin-left: -20%}
}
/* bigscreen three_col_grail */
[user=media]media[/user] only screen and (min-width:1025px) {
#page-wrapper {width:100%}
.two-sidebars #content .section {margin-left: 27%; margin-right: 25%}
.one-sidebar #content .section {margin-left: 27%;}
.sidebar-second #content .section {margin-left: 0; margin-right: 25%;}
#sidebar-first .section {margin-left: 0; margin-right: 10px;}
#sidebar-second .section {margin-right: 0; margin-left: 10px;}
#sidebar-first {width: 27%; margin-left: -100%}
#sidebar-second {width: 25%; margin-left: -25%}
}
27% это в конце /* bigscreen three_col_grail */.
Комментарии
обёрткам виджетов iframe или emded ,посмотрите в firebug какие имеено , max-width:100%;
Mihail.space, не совсем понял, можно поподробнее что именнно посмотреть?
F12 на клавиатуре, когда открыт браузер и посмотрите html в котором выводятся виджеты
Mihail.space, посмотерл и судя по всему они все iframe...
Почитай про адаптивную вёрстку и ты сразу поймешь что делать, да и в будущем пригодится. Без базы html и css добиватсья искомого отображения сложно.
Внутри виджета браузер тебе не даст заносить свои стили. тут только смирится, максимум наложить стили сможешь только на iframe
oleg90990, если прописать в виджете ширину не в процентах, а в пикселях, то все правильно отображается.