Как переместить заголовок сайта над изображением баннера

Question

Баннер моего сайта неожиданно появился над текстом заголовка, а не под ним.Я исправил CSS в настольной версии, но не могу получить его прямо на телефоне.(Это WordPress, и текст добавляется как заголовок баннера и слоган)

Может кто-нибудь, пожалуйста, скажите мне, какой код должен быть.

Сайт: www.flowersforeveryone.co.za

@media (max-width: 475px){
    .page-banner-wrap .page-banner .page-header > .page-title{
        font-size: 14pt;
        line-height: 1.2;
}

#lsx-banner .tagline{
font-size: 9pt;

}

.page-banner-wrap .page-banner > .page-banner-image{
    height: 30vh;
position: relative;
}

Answer 1

Что-то вроде CSS ниже должно решить проблему.Я не знаю, почему это произошло.Я предполагаю, что разметка DOM изменилась, и поэтому баннер больше не отображается правильно.Возможно, вам придется настроить параметры ниже.Это просто подсказка, с чего начать.Я сделал баннер довольно привлекательным, но все еще есть возможности для улучшения.Я изменил положение фона (изменил размер на устройствах с меньшим экраном - точка останова 720px / 768px) и растянул контейнер изображения с определенными размерами экрана (<= 991px) до 100%. </p>

.page-banner-wrap .page-banner > .container {
    margin-top: 20px;
}  

.page-banner-wrap .page-banner > .page-banner-image {
    background-position: 50% 65% !important;
}    

@media only screen and (max-width: 991px)
.page-banner-wrap .page-banner > .page-banner-image {
    height: 100%;
    position: absolute;
}

@media (max-width: 768px)
.page-banner-wrap .page-banner > .page-banner-image {
    background-size: 350px;
}

@media (max-width: 720px)
.page-id-10 .page-banner-wrap .page-banner > .page-banner-image {
    background-size: 300px;
}

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