Bootstrap - containers overlapping in small devices - css

Question

I'm buliding a website in Asp.net MVC. A beginner with the bootstrap framework - Im trying to make my project responsive to mobile and tab devices. But the text in my containers seems to be overlapping for small size devices. This is my code.
Index.cshtml
<div class="feature">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4" id="left">
<img class="img-responsive" src="~/Content/Images/health/ayurveda7.jpg" />
</div>
<div class="col-xs-12 col-sm-12 col-md-4" id="middle">
<h1>Ayurveda - Harmony of <span>Mind, Body</span> and <span>Soul</span>.</h1>
<p>
Sprouted in the pristine land of India some 5000 years ago, Ayurveda, the science of life and longevity,
is the oldest healthcare system in the world and it combines the profound thoughts of medicine and philosophy.
Since then Ayurveda has stood for the wholesome physical, mental and spiritual growth of humanity around the world.
Today, it's a unique, indispensable branch of medicine, a complete naturalistic system that depends on the diagnosis
of your body's humours - vata, pitta and kapha - to achieve the right balance.
</p>
#*Rejuvenate*#
<button class="btn btn-default">
#Html.ActionLink("Rejuvenate", "Health")
</button>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<img class="img-responsive" src="~/Content/Images/health/ayurveda5.jpg" />
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="video-section">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-7 hidden-sm hidden-xs">
<iframe id="player" width="800" height="480"
src="https://www.youtube.com/embed/jlEYu--6T14? rel=0&enablejsapi=1&autoplay=1&controls=0&showinfo=0&loop=1&playlist=jlEYu--6T14"
frameborder="0" allowfullscreen></iframe>
<script>
#*To mute the video*#
#*To load the youtube player api asynchronously*#
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
//height: '390',
//width: '640',
//videoId: 'jlEYu--6T14',
events: {
'onReady': onPlayerReady,
//'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.setVolume(0);
event.target.playVideo();
//player.mute();
}
</script>
</div>
<div class="col-xs-12 col-sm-12 col-md-5">
<div class="content">
<br />
<h1>Culture,Festivals and Art Forms</h1>
<p>
Gifted with some of the unique classical Dances, art form and festivals, Kerala is said to have a cultural history that dates
back to a thousand years.
The land known for the pooram festivals is also blessed with unique art forms like Theyyam, Kutiyattam and Patayani.
</p>
<p>
Festivals are true celebrations in God's Own Country; occasions when grandeur prevails over the characteristic simplicity
of the Kerala lifestyle. Be it the state festival of Onam or the one at a local place of worship, faboulous attire and sumptuous
feasts are a must for the celebrations.
</p>
<p>
Besides being occasions for merry-making, festivals of Kerala have traditionally been preservers of the art and culture
of this land. Whether religious or social, traditional or modern, a festival here is never complete without an art event
which would range from the 2000-year-old Kutiyattam to contemporary stage shows.
</p>
<p>
<button class="btn btn-default">
#Html.ActionLink("Celebrate", "Festivals")
</button>
</p>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
/*footer*/
<footer>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4">
<h3>Promoting Kerala</h3>
Trivandrum, Kerala - 695003<br />
India
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<h3>Travel Information</h3>
<ul>
<li>#Html.ActionLink("How to reach", "Reach")</li>
<li>#Html.ActionLink("Visa on Arrival", "Visa")</li>
<li>#Html.ActionLink("Travel Tips", "TravelTips")</li>
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<h3>Share</h3>
<img src="~/Content/Images/backgrd/facebook.jpg" />
<img src="~/Content/Images/backgrd/twitter.jpg" />
</div>
</div>
<p id="copy">© xyz</p>
</div>
</footer>
style.css
/*****************************************Feature*********************Ayurveda************/
.feature .container{
height:350px;
background: url(/Content/Images/backgrd/bg-ayur12.jpg) no-repeat center center;
background-size: cover;
}
.feature .col{
width:30%;
float:left;
padding:10px;
margin-right:42px;
margin-left:25px;
color:#7b278e;
}
#left img{
padding-left:15px;
}
#middle{
margin:auto;
background: url(/Content/Images/backgrd/bg-ayur4.jpg) no-repeat center center;
background-size: cover;
height:350px;
}
.feature span{
font-family:'Great Vibes',cursive;
}
.feature .row img{
height:350px;
width:400px;
}
#middle .btn {
background: transparent;
border:1px solid #7b278e;
text-align:center;
margin-left:138px;
-moz-transition: box-shadow 0.5s;
-o-transition: box-shadow 0.5s;
-webkit-transition: box-shadow 0.5s;
transition: box-shadow 0.5s;
}
#middle .btn a{
color:#7b278e;
text-decoration:none;
}
#middle .btn:hover{
border:1px solid #7b278e;
box-shadow:3px 3px 6px #7b278e;
font-weight:600;
/*box-shadow: 0 1px 6px #7b278e;/*rgba(0, 0, 0, 0.6);*/*/
}
.clearfix{
clear:both;
}
/*****************Video Section****************Art, Festivals***************/
.video-section {
margin-top: 60px;
}
#player{
margin-left:10px;
float:left;
padding-right:10px;
}
.video-section iframe{
margin:auto;
}
.video-section .content{
height:480px;
border:1px solid green;
background: url(/Content/Images/backgrd/bg-art2.jpg) no-repeat center center;
background-size: cover;
margin-left:10px;
}
.video-section .content h1{
color:#f2f2f2;
padding-left:10px;
}
.video-section .content p{
color:#f2f2f2;
padding-left:10px;
}
.video-section .content .btn{
background: transparent;
border:1px solid #f2f2f2;
text-align:center;
margin-right:50px;
-moz-transition: box-shadow 0.5s;
-o-transition: box-shadow 0.5s;
-webkit-transition: box-shadow 0.5s;
transition: box-shadow 0.5s;
}
.video-section .content .btn a{
color:#f2f2f2;
text-decoration:none;
}
.video-section .content .btn:hover{
border:1px solid #f2f2f2;
box-shadow: 0 1px 6px #f2f2f2;
font-weight:600;
}
/**********************Footer************/
footer{
width:100%;
background-color:#CC0000;
color:#f2f2f2;
}
footer h3 {
font-weight:700;
font-size:16px;
}
footer .col{
margin-left:15px;
border:1px solid blue;
}
footer img{
height:8px;
width:8px;
}
footer .row ul{
list-style:none;
}
footer .row li{
padding-bottom:0;
margin-bottom:0;
}
footer .row li a{
text-decoration:none;
color:#f2f2f2;
}
footer .row li a:hover{
font-weight:700;
}
footer .row img{
height:30px;
width:30px;
margin-right:10px;
}
#copy{
float:right;
margin-right:10px;
margin-bottom:5px;
color:#f2f2f2;
}
#media(max-width: 750px){
.btn{
margin:auto;
}
.container{
margin-top:10px;
}
}
The .video-section and .footer containers are overlapping with the .feature container.
[This is how it looks on medium devices][1]
[This is how it looks in mobile][2]
Update:
#Miguel Leite: Thanku so much for the suggestion. It has helped.
Ive changed the code like this:
index.html
<div class="video-section">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-7" id="video-content">
But still the beginning of the video-section container is overlapping with the feature container.
Mobile view after edit
Could i get the video-section container to start only below the feature container?

Answer 1

You need to add the class .container to your .video-section element, or wrap the .row into a .container element.
Two solutions:
<div class="video-section">
<div class="container">
<div class="row">
(...)
</div>
</div>
</div>
or:
<div class="video-section container">
<div class="row">
(...)
</div>
</div>
That should get it fixed :)

Answer 2

A part of the problem that I can see is that you're giving your columns the same amount of space to take up on mobile devices. Try adjust the column sizes for small and extra small devices.