создание стекируемых двух столбцов в WordPress

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

На смартфонах это выглядит ужасно, я пытаюсь сделать столбцы стопкой.

Вы можете увидеть страницу по адресу: http://goo.gl/t8QOA5.

Соответствующий CSS:

.one_half {
float:left;
line-height:22px;
margin-right:2%;
width:49%;
margin-bottom:27px;
display:block
}

.one_half_last {
float:left;
line-height:22px;
width:49%;
margin-bottom:27px;
display:block
}

wordpress css responsive-design wordpress-theming responsiveness
person user1724434    schedule 24.04.2015    source источник
comment
Совет для профессионалов... потеряйте автоматическое воспроизведение музыки, это может быть очень раздражающим и заставило меня немедленно закрыть вкладку, многие другие пользователи и потенциальные клиенты тоже.   -  person Jakeii    schedule 25.04.2015
comment
хе-хе, да, я знаю, я только добавил это для себя в список, пока я заканчиваю сайт.   -  person user1724434    schedule 25.04.2015

Ответы (1)


arrow_upward
2
arrow_downward

используйте медиа-запросы для написания условного css на основе ширины области просмотра. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Пример:

@media (max-width: 480px) {
    .one_half, .one_half_last {
        width: 100%;
    }
}
person Jakeii    schedule 24.04.2015
comment
Гениальный Джейкей! Спасибо. - person user1724434; 25.04.2015