Mein Parallax-Bild reagiert nicht auf Handys/Bootstrap

Question

Da die Breite meines Bildschirms 682PX ist, wird meine Bildbreite nicht auf dem Bildschirm angezeigt und sie verschwindet. Es ist offensichtlich nicht reaktionsschnell und ich bin ratlos warum.

Ich habe auch eine Klasse von 'img-responsive' zu meinem Abschnitt Parrallax enthalten. Das hat auch nicht funktioniert.

<section class="module parallax parallax-1" class="img-responsive"> 
    <div class="container"> 
    <h1>Services</h1> 
    </div> 
</section> 

<section class="module content"> 
    <div class="container"> 
    <h2>Lorem Ipsum Dolor</h2> 
     <p></p> 
    </div> 
</section> 
</div> 

CSS:

section.module:last-child { 
    margin-bottom: 0; 
} 
section.module h2 { 
    margin-bottom: 40px; 
    font-family: "Roboto Slab", serif; 
    font-size: 30px; 
} 
section.module p { 
    margin-bottom: 40px; 
    font-size: 16px; 
    font-weight: 300; 
} 
section.module p:last-child { 
    margin-bottom: 0; 
} 
section.module.content { 
    padding: 40px 0; 
    height: 600px; 
} 
section.module.parallax { 
    height: 600px; 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover !important; 
    margin-top: -30px; 
} 
section.module.parallax h1 { 
    color: rgba(255, 255, 255, 0.8); 
    font-size: 48px; 
    line-height: 600px; 
    font-weight: 700; 
    text-align: center; 
    text-transform: uppercase; 
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
} 

section.module.parallax-1 { 
    background-image: url("../img/rolling.jpg"); 


} 

Answer 1

Überprüfen Sie die section.module.parallax-1 Teil habe ich hinzugefügt Hintergrund bietet dieser Klasse an. Auch die section.module.parallax Klasse entfernt, wie es Konflikte mit dem Ergebnis hat, die in Frage gestellt wurden

section.module:last-child { 
 
    margin-bottom: 0; 
 
} 
 
section.module h2 { 
 
    margin-bottom: 40px; 
 
    font-family: "Roboto Slab", serif; 
 
    font-size: 30px; 
 
} 
 
section.module p { 
 
    margin-bottom: 40px; 
 
    font-size: 16px; 
 
    font-weight: 300; 
 
} 
 
section.module p:last-child { 
 
    margin-bottom: 0; 
 
} 
 
section.module.content { 
 
    padding: 40px 0; 
 
    height: 600px; 
 
} 
 

 
section.module.parallax h1 { 
 
    color: rgba(255, 255, 255, 0.8); 
 
    font-size: 48px; 
 
    line-height: 600px; 
 
    font-weight: 700; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
 
} 
 

 
section.module.parallax-1 { 
 
    background-image: url("https://image.ibb.co/dquSd5/rolling.jpg"); 
 
    background-repeat:no-repeat; 
 
background-size:contain; 
 
    background-size: 100%; 
 
top: 0; 
 

 

 
}

<section class="module parallax parallax-1 img-responsive"> 
 
    <div class="container"> 
 

 
    <h1>Services</h1> 
 
    </div> 
 
</section> 
 

 
<section class="module content"> 
 
    <div class="container"> 
 
    <h2>Lorem Ipsum Dolor</h2> 
 
     <p></p> 
 
    </div> 
 
</section> 
 
</div>