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

Question

У меня есть этот веб-сайт: http://ehealth4u.cs.ucy.ac.cy/

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

Я попробовал следующий код, но безуспешно:

#masthead {
    height: auto;
    width: auto;
    margin: 0;
    padding: 0;
}

Answer 1

Для #masthead вы фиксируете верхнюю позицию на 150px, что и вызывает вашу проблему. Вы можете увеличить вершину до 200px или найти динамический c способ.

Answer 2

Измените CSS для заголовка с

#text-7 {
position: relative;
top: -210px;
}

На

@media only screen and (max-width: 768px) {
#text-7 {
position: absolute;
width: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
} }

И измените отступы на полях для следующего элемента для учета меню:

@media only screen and (max-width: 768px) {
.business-template .widget.widget_call_to_action_block .call-to-action-content-wrapper {
padding: 25px 0;
margin: 200px 0 0;
} }