I'm encountering an issue with the top section of my one-page website.
While it looks great on desktop, on other devices, the three main photographs in the section stack on top of each other instead of expanding to fit the screen properly. The images either overflow or get hidden when using the overflow hidden property.
I'm struggling to identify the root cause of this problem and would really appreciate some guidance on how to resolve it.
Below is the HTML code snippet:
<!-- Jumbotron -->
<section class="jumbotron" id="header">
<div class="container">
<div class="main-photo" id="header-photo">
</div>
<div class="transparent-box" style="padding-top: 3%;">
<img src="images/logo.png" style="width: 100%;"></img>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1" style="padding-top:5%">
<div class="row">
<div class="col-md-3 col-sm-offset-1">
<figure class="round-outline">
<img class="round-photo img-responsive" src="assets/photo1-sm.jpg" alt="">
<div class="round-caption-bg"></div>
</figure>
</div>
<div class="col-md-3">
<figure class="round-outline">
<img class="round-photo img-responsive" src="assets/photo2-sm.jpg" alt="">
<div class="round-caption-bg"></div>
</figure>
</div>
<div class="col-md-3">
<figure class="round-outline">
<img class="round-photo img-responsive" src="assets/photo3-sm.jpg" alt="">
<div class="round-caption-bg"></div>
</figure>
</div>
</div>
<div class="row">
<a href="#quote-one" style="color: #d5b17c;">
<i class="fa fa-chevron-down fa-2x pulsate-opacity chevron"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- End of Jumbotron -->
And the accompanying CSS code:
/* ==========================================================================
Jumbotron Section
========================================================================== */
.jumbotron {
padding: 100px 0 60px;
margin-top: 0;
margin-bottom: 0;
background: transparent url('../images/black-red-background.jpg') no-repeat top center;
background-size: auto auto;
background-attachment: fixed;
font-size: 1em;
height: auto;
overflow: hidden;
}
.jumbotron .container {
text-align: center;
}