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

Question

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

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

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

Answer 1

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

Если вы добавите другое свойство к .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 2

Попробуйте CSS vh и vw как в "max-width:95vw;"

Answer 3

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

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

Подтверждение концепции: https://jsfiddle.net/ctsmxs98/2/