Как сделать делитель будет реагировать/для автоматического изменения размера на различных размерах экрана

Question

В моей странице я использую некоторые делители с этого сайта: http://www.dcodes.net/2/docs/divider.html

и все хорошо выглядеть, но когда я получить доступ к странице с мобильного телефона в вертикальном положении разделители не изменяются автоматически (ar too long), , так что мой вопрос:

Как сделать их отзывчивыми, чтобы автоматически изменять размер на разных размерах экрана?

Answer 1

На мобильном устройстве (или ширина любого экрана тоньше, чем делитель):

.child { 
    margin-left: -50%; 
} 
.parent { 
    overflow: hidden; 
} 

Доказательства концепции: https://jsfiddle.net/ctsmxs98/2/

Answer 2

Они не изменять размеры, так как таблица стилей они обеспечивают имеют width: 600px определенные на .dc_divider1 править. Это правило отлично подходит для настольных компьютеров, но 600 пикселей на большинстве мобильных устройств - это слишком много.

Если вы добавили другое свойство в правило .dc_divider, чтобы ограничить ширину, оно будет отображаться правильно на мобильных устройствах. Правило для добавления - это правило max-width: 100%;. Всякий раз, когда мобильное устройство пытается отобразить фоновое изображение, правило max-width не позволит ему быть более широким, чем мобильный экран.

Пример:

.dc_divider1 { 
    background:url(../images/dc_divider1.png) no-repeat scroll center transparent; 
    height:35px; 
    margin:0px auto; 
    padding:6px; 
    width:600px; 

    max-width: 100%; 
} 

Answer 3

Попытка CSS VH- и оч.сл. с, как и в "макс-ширина: 95vw;"