Текст Исчезновение на странице Resize

Question

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

Вот HTML структура применимой части страницы:

<div class="hero-image-row"> 
    <div class="hero-image-outer text-center"> 
    <div class="hero-image-inner text-center"> 
     <%= image_tag 'Background 4.jpg', class: "hero-image",alt: "View of Golf Course, Ocean, and Dunes" %> 
    </div> <!-- hero-image-inner --> 
    </div> <!-- hero-image-inner --> 
</div> <!-- row --> 


<div class="overlap-hero-image container"> 
    <div class="text-center page-title-bar"> 
    <h1 style="color: white; margin-top: 120px">Personalized Golf Tips Newsletter</h1> 
    <h3 class="black-outline" style="color: white; margin-top: 100px">Your golf game is as unique as you are.<br>Shouldn't your golf tips be personalized to fit you?</h3> 
    </div> 
</div> 

А вот уместна CSS:

.hero-image-row { 
    margin-top: -100px; 
    overflow-x: hidden !important; 
    width: 100% !important; 
} 

.hero-image-outer { 
    width: 300%; 
    height: 500px; 
    overflow-y: hidden !important; 
} 

.hero-image-inner { 
    width: 66%; 
    overflow-x: hidden !important; 
} 

.hero-image { 
    height: 500px; 
    margin-left: -50%; 
    z-index: 0 !important; 
} 

.overlap-hero-image { 
    margin-top: -500px; 
    height: 500px; 
} 

.overlap-hero-image h4 { 
margin-top: 140px; 
color: #FFFFFF !important; 
text-shadow: 
    -1px -1px 0 #000, 
    1px -1px 0 #000, 
    -1px 1px 0 #000, 
     1px 1px 0 #000 !important; 
} 

@media screen and (min-width: 1100px) { 
    .hero-image-outer { 
    width: 100%; 
    } 

    .hero-image-inner { 
    width: 100%; 
    height: 500px; 
    } 

    .hero-image { 
    width: 100%; 
    height: auto; 
    margin-left: 0%; 
    } 
} 

Я знаю, что изображение исчезает в 1140px на одной странице, но 1100px на другой странице, так как это связано с точкой останова, установленной в CSS, я не уверен. Может ли кто-нибудь увидеть, как это происходит? Я пробовал устанавливать z-индексы, но безрезультатно.

Я использую bootstrap, если это имеет значение. И я не могу установить изображение как фон CSS, потому что у меня были проблемы с компоновкой изображений для фоновых изображений CSS, когда я нажимаю на Heroku, поэтому мне нужно решение с изображением, связанным в HTML.

Answer 1

Внутри блока css .hero-image-inner под номером @media screen and (min-width: 1100px), прокомментируйте height: 500px;.

.hero-image-inner { 
    width: 100%; 
    /*height: 500px;*/ 
    } 

Он мешая overflow, что унаследовали.

http://codepen.io/EskoCruz/pen/KMMBBz