Необходимо сделать адаптивность блока

alexdosson · 2016-06-18T20:28:40.0000000Z

Доброго времени суток. Подскажите как сделать адаптивность. У меня есть блок, но при ресайзе остается скролл. Я пробовал ставить ширину в процентах, но не получилось вот мой код <script type="text/javascript" src="js/jquery.countdown.js"></script> $(document).ready(function() { $("#timer").countdown({ since: new Date(2015, 8, 6, 00, 00, 00), format: "YODHMS", layout: '<dl><dt id="years_lbl">YEARS</dt><dd id="years">{ynn}</dd><dt id="months_lbl">MONTHS</dt><dd id="months">{onn}</dd><dt id="days_lbl">DAYS</dt><dd id="days">{dnn}</dd><dt id="hrs_lbl">HOURS</dt><dd id="hours">{hnn}</dd><dt id="mins_lbl">MINUTES</dt><dd id="minutes">{mnn}</dd><dt id="secs_lbl">SECONDS</dt><dd id="seconds">{snn}</dd></dl>' }); }); <article class="article-timer"> <center> <div style="font-family:verdana; " id="timer"></div> </center> </article> <article class="article-timer"> <center> <div style="font-family:verdana; " id="timer"></div> </center> </article> А вот собственно сам проблемный CSS dl { position:relative; height:80px; margin:20px auto 50px; width:810px; height:150px; background:green; font-size:1.5em; color:#000; } dt { position:absolute; top:10px; left:0; width:135px; text-align:center; padding-top:15px; } dd { position:absolute; top:50px; left:0; font-size:2.2em; text-align:center; width:135px; } dt#years_lbl, dd#years { left:0; } dt#months_lbl, dd#months { left:135px; } dd#days { left:270px; } dd#hours { left:405px; } dt#mins_lbl, dd#minutes { left:540px; } dt#secs_lbl, dd#seconds { left:675px; } #dl * { text-outline: 1px 1px #000; } dt#days_lbl {left:290px;} dt#hrs_lbl {left:415px;}

319

Aisamiery

28 июня 2016, 07:53

#11

alexdosson:
Так поймите у меня сайт на вордпрессе и верстка с дизайном уже готовы. Я не могу менять полностью верстку. Есть варианты как поправить не меняя шаблон?

CSS это каскадные таблицы, они перезаписывают свойста. Media query позволяют перезаписывать свойста для других экранов/устройств/режимов, то есть не меняя верстку, не меняя базовый css вы можете подключить свой файл со стилями, где будет написано, как стили должны поменяться на экранах меньшего размера, убрать позиционирование или подвинуть куда и так далее.

Нет той кнопки, что вы ищите, у вас 2 варианта, или разобратся самому, или обратиться к специалисту. Но видимо вам первый вариант не подходит, раз вы еще не сделали, там делов то на час другой.

Разработка проектов на Symfony, Laravel, 1C-Bitrix, UMI.CMS, OctoberCMS

Влияние вируса на понижение CSS (мобильная версия) Blueprint CSS - коротенькое

Переиграть и победить: как анализировать конкурентов для продвижения сайта

Яндекс Вебмастер вынес товарные фиды в отдельный раздел

Необходимо сделать адаптивность блока