I'm having trouble with the cover not fully expanding when the browser size is less than 750. I am new to using bootstrap.
For reference, I am looking at this website:
CSS
.slide-wrapper {
position: relative;
}
/* Not using now
.carousel-caption {
text-align: left;
padding-right: 300px;
}
*/
@media (min-width: 768px) {
.snippet {
max-width: 600px;
position: absolute;
background: black;
opacity: 0.3;
left: 10%;
top: 3%;
bottom: 3%;
}
.snippet-content {
width: 95%;
height: 100%;
background: black;
opacity: 0.5;
color: #fff;
}
}
@media screen and (max-width: 699px) and (min-width: 520px){
.snippet {
max-width: 400px;
position: absolute;
background: black;
left: 0%;
top: 5%;
bottom: 5%;
padding: 20px 0;
opacity: 0.3;
margin-left: 0px;
}
.snippet-content {
height: 100%;
background: black;
opacity: 0.5;
color: #fff;
margin-right: 15px;
}
}
This represents the CSS styling used in the HTML.
HTML
<div class="slide-wrapper">
<div class="container-fluid">
<div class="row carousel-holder">
<div class="col-md-12">
<div class="carousel slide" id="carousel-generic" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-generic" data-slide-to="1"></li>
<li data-target="#carousel-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<%= image_tag("Ram.jpg", alt: "Ram Image", class: "slide-image img-responsive")%>
</div>
<div class="item">
<%= image_tag("System.jpg", alt: "Graphiccard Image", class: "slide-image img-responsive")%>
</div>
<div class="item">
<%= image_tag("Motherboard.jpg", alt: "Motherboard Image", class: "slide-image img-responsive")%>
</div>
</div>
<a class="left carousel-control" href="#carousel-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<div class="snippet">
<div class="snippet-content">
Content of the snippet.
</div>
</div>
</div>
</div>
</div>
</div>
This represents the HTML structure being used.
Please visit the provided website link for suggestions on making the snippet design more responsive like the referenced site.