CODEWITHSUNDEEP
htmltwitter-bootstrapcsstwitter-bootstrap-3
Liz
Liz

Reputation: 1437

Text Disappearing On Page Resize

I have a page set up where there is an image with an overlapping div that holds text. The text displays properly up until a media breakpoint, but above that it disappears. I have looked on Chrome Dev Tools and when I mouse over the text it highlights the portion of the image where it should reside, but the text still cannot be seen.

Here is the HTML structure of the applicable portion of the page:

<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>

And here is the pertinent 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%;
   }
 }

I know the image is disappearing at 1140px on one page, yet 1100px at a different page, so how it's related to the breakpoint established in the CSS I'm not sure. Can anyone see how this is happening? I've tried setting the z-indexes but to no avail.

I am using bootstrap if that makes a difference. And I can't set the image as a CSS background because I have had problems with image compilation for CSS background images when I push it to Heroku, so I need a solution with the image linked in the HTML.

Upvotes: 1

Views: 1991

Answers (1)

Esko
Esko

Reputation: 682

Inside the css block .hero-image-inner under the @media screen and (min-width: 1100px), comment out the height: 500px;.

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

It is interfering with the overflow that it inherited.

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

Upvotes: 1

Related Questions