I'm a beginner with Bootstrap and could use some assistance.
In my code, I have text and images divided into four columns with alignment set based on screen size using media queries in CSS. However, when resizing the window to tablet view (check Screenshot No. 1), it appears messy as the text is too large and the image is too close. At this tablet view, I'd like the columns to align vertically (like Screenshot No. 2) with the image on the left side, and the text and headings next to the image. This change should not affect the mobile view where everything is centered (Screenshot No. 3).
If my question isn't clear enough, please refer to the template at
They have a "Work Team" section that I would like to replicate.
I appreciate any help!
Thank you!
<div class="jumbotron">
<div id="wrapper"> <!--Wrapper-->
<div class="container"> <!--Container-->
<div class="row" style="padding-bottom: 40px;">
<div class="col-md-12" align="center">
<h1>Meet Us</h1><hr class="style1"></hr>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<img src="images/11.jpg" class="img-circle img-responsive" width="180"/>
</div>
<div class="col-sm-3">
<h2 class="style1">Shaikh Obaidullah</h2>
<h3 class="style1">CEO / Web Developer</h3>
<hr class="style2"></hr>
<p class="style1">I will be taking care of product development stages such as Requirements, Development, Functionality, Usability, and Technical Support.</p>
</div>
<div class="col-sm-3">
<img src="images/12.jpg" class="img-circle img-responsive" width="180"/>
</div>
<div class="col-sm-3">
<h2 class="style1">Ovais M. Shaikh</h2>
<h3 class="style1">Graphic Designer</h3>
<hr class="style2"></hr>
<p class="style1">I will spice up your product with creative and unique designs so that you get the most attracted product in the end.</p>
</div>
</div>
</div> <!--Container-END-->
</div> <!--Wrapper-END-->
.jumbotron {
background-image: url('../images/13.jpg');
background-attachment: fixed;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.img-responsive {
margin: 0 auto;
}
#wrapper {
background-color: #FFF;
background: rgba(0,0,0,.7);
color: #FFF;
padding-bottom: 40px;
}
hr.style1 {
margin-bottom: 30px;
margin-top: 30px;
width: 100px;
border-top: 2px solid #8884bc;
}
@media (min-width: 768px) {
h2.style1{
color: #8884bc;
text-align: left;
margin-bottom: 0px;
}
h3.style1{
text-align: left;
margin-top: 10px;
}
hr.style2 {
margin-bottom: 50px;
margin-top: 50px;
margin-left: 0px;
width: 100px;
border-top: 2px solid #8884bc;
}
p.style1{
font-size: 20px;
text-align: left;
color: #eee;
}
.jumbotron{
margin-bottom: 0px;
}
}
@media only screen and (max-width:768px) {
hr.style2 {
margin-bottom: 30px;
width: 100px;
border-top: 2px solid #8884bc;
}
h2.style1{
color: #8884bc;
text-align: center;
margin-bottom: 0px;
}
h3.style1{
text-align: center;
margin-top: 5px;
font-size: 20px;
}
p.style1{
margin-bottom: 80px;
font-size: 16px;
text-align: center;
color: #eee;
}
}