Как предотвратить перекрытие двух div?

Question

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

Как это сделать?

Answer 1

@media only screen and (max-width:768px){ 
.vc_row-fluid.lighter-overlay, 
.vc_row-fluid.darker-overlay{ 
display:inline-block; /* Change this to inline-block instead of block */ 
} 
} 

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

Answer 2

Проверьте с помощью Bootstrap. он обеспечивает отзывчивый CSS. вы должны включить требуемый класс div.

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

<div class="col-sm-12"> 

<div class="col-sm-6"> 
// your code for first div 
</div> 

<div class="col-sm-6"> 
//your code for second div 
</div> 

</div> 

попробуйте вот так. это может помочь вам.

Answer 3

Я надеюсь, что я понимаю ваш вопрос, потому что его не совсем ясно (код не предусмотрен)

Но я думаю, что вам нужно сделать, это следующее:

<!-- Probably your html part --> 

<div class = "wrapper"> 
    <div class = "container"> 
     <!-- Some content--> 
    </div> 
    <div class = "container"> 
     <!-- Some content--> 
    </div> 
</div> 

Здесь приходит CSS магия .. ...

.wrapper{ 
    display:block; 
} 
.container{ 
    display: inline-block; 
} 
@media only screen and (max-width:768px){ 
    .container{ 
     width:100%; 
    } 
} 
@media only screen and (min-width:768px){ 
    .container{ 
     width:50%; 
    } 
} 

с помощью средств массовой информации querys вы можете легко исправить такого рода вещи

Answer 4

Вы добавили в качестве комментария к вашему вопросу о том, что демо URL был http://voyagecontrol.com/canarywharf

Происхождение проблемы: #venue_draft имеет встроенные стили, включая height: 900px.
Решение: она должна быть удалена (элементы должны адаптироваться автоматически к более или менее содержание Не фиксации высоты является хорошим началом для этого.) Или, если возникают другие проблемы, заменены min-height: 900px