i new bootstrap. , have made website in bootstrap 3.0. website working on laptop. when hosted website of images not loaded in webpage. , further when try open website in mobile device carousel images not fitted carousel mean leaves blank space not cover entire carousel space. , while loading website on mobile device background image not fitted screen. please me out totally stuck. website url www.krishzone.com
and code
<meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>krishh kidss zone</title> <!-- bootstrap core css --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- custom css --> <link href="css/modern-business.css" rel="stylesheet"> <link href="css/lightbox.css" rel="stylesheet"> <link href="css/navbar.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- custom fonts --> <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view page via file:// --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body style="background: url(../img/background1.png) no-repeat center center fixed" style="-webkit-background-size: cover" style="moz-background-size: cover" style="-o-background-size: cover" style="background-size: cover"> <div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top " role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="index.html">krishh kidss zone</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navbar-menubuilder"> <ul class="nav navbar-nav navbar-right"> <li><a href="about.html">about </a> </li> <li><a href="whykrishkids.html">why krishh kidss</a> </li> <li><a href="admission.html">admissions</a> </li> <li><a href="events.html">events</a> </li> <li><a href="gallery.html">gallery</a> </li> <li><a href="achivements.html">achivements</a> </li> <li><a href="contact.html">contact us</a> </li> </ul> </div> </div> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <!-- header carousel --> <header id="mycarousel" class="carousel slide"> <!-- indicators --> <ol class="carousel-indicators"> <li data-target="#mycarousel" data-slide-to="0" class="active"></li> <li data-target="#mycarousel" data-slide-to="1"></li> <li data-target="#mycarousel" data-slide-to="2"></li> </ol> <!-- wrapper slides --> <div class="carousel-inner"> <div class="item active"> <img src="../img/school.jpg" alt="learn" style="max-width:100%" style="height:auto" class="img-responsive"> <div class="carousel-caption"> <h2>krishh kidss zone...</h2> </div> </div> <div class="item"> <img src="../img/learning.jpg" alt="fun" style="max-width:100%" style="height:auto" class="img-responsive"> <div class="carousel-caption"> <h2>where learning is...</h2> </div> </div> <div class="item"> <img src="../img/playing.jpg" alt="play" style="max-width:100%" style="height:auto" class="img-responsive"> <div class="carousel-caption"> <h2>fun</h2> </div> </div> </div> <!-- controls --> <a class="left carousel-control" href="#mycarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#mycarousel" data-slide="next"> <span class="icon-next"></span> </a> </header> <!-- page content --> <div class="container"> <!-- marketing icons section --> <div class="row"> <div class="col-lg-12"> <h1 class="page-header"> krishh kidss zone </h1> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h4>vision</h4> </div> <div class="panel-body"> <p> "to make child grow complete personality , develop strength meet challenges ahed." <br/> <br/> <br/> <br/> </p> <div class="text-center"> <a href="vision.html" class="btn btn-default">read more</a> </div> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h4>about us</h4> </div> <div class="panel-body"> <p>we have started krishh kidss zone pre school in 11th february 2010 motto give best primary education children out burden. adopt simple , effective slogan “where learning fun” , focus on children’s learning of fun.</p> <div class="text-center"> <a href="about.html" class="btn btn-default">read more</a> </div> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h4>events</h4> </div> <div class="panel-body"> <p> celebrate each , every festivals , days part of our curriculam. children know , understand impotance of festivals , days. try fill colours in education celebrating such events. <br/> <br/> </p> <div class="text-center"> <a href="events.html" class="btn btn-default">see more</a> </div> </div> </div> </div> </div> <!-- features section --> <!-- /.row --> <hr> <!-- call action section --> <div class="well"> <div class="row"> <div class="col-md-8"> <h3> contact us:</h3> <p>adress:<br/> 18 sarita vihar,<br/> opp. kartavya bunglows,<br/> anand nadiad road,<br/> lambhvel, 387-310<br/> anand, gujarat</p><br/> </div> <div class="col-md-4"> <p>contact details<br/> ph.no. +91 99799 64200 <br/> on facebook <ul class="list-unstyled list-inline list-social-icons"> <li> <a href="https://www.facebook.com/krishkidszone?fref=ts"><i class="fa fa-facebook-square fa-2x"></i></a> </li> </ul></p> <p>copyright © krishh kidss zone 2015</p> <p>developed by: shree infotech ltd.</p> </div> </div> </div> <hr> <!-- footer --> </div> <!-- /.container --> <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/lightbox.min.js"></script> <!-- script activate carousel --> <script> $('.carousel').carousel({ interval: 5000 //changes speed }) </script> </body>
you have multiple div , nav tags duplicates or out of place completely. images inside carousel contain multiple style tags style="max-width:100%" style="height:auto" should style="max-width:100%; height:auto;" unnecessary , should go stylesheet if need apply rules.
this example should provide better starting point you.
$('.carousel').carousel({ interval: 5000 //changes speed })body { background: url(http://placehold.it/1350x1050/5e58d1/fff/) no-repeat center center fixed; background-size: cover; } html, body { height: 100%; } .navbar.navbar-default { font-size: 16px; background-color: #3a368c; border-width: 0px; border-radius: 0px; } .navbar.navbar-default .navbar-nav > li > { color: #faf2f2; background-color: #161263; } .navbar.navbar-default .navbar-nav > li > a:hover { color: #faf2f2; background-color: #3c3880; } .navbar.navbar-default .navbar-brand, .navbar.navbar-default .navbar-brand:hover { color: #fff; } .navbar.navbar-default .navbar-toggle { border-color: #5e58d1; } .navbar.navbar-default .navbar-toggle .icon-bar { background-color: #fff; } .carousel, .item, .active { height: 100%; } .carousel-inner { height: 100%; } .fill { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .carousel.fade { opacity: 1; } .carousel.fade .item { -moz-transition: opacity ease-in-out .7s; -o-transition: opacity ease-in-out .7s; -webkit-transition: opacity ease-in-out .7s; transition: opacity ease-in-out .7s; left: 0 !important; opacity: 0; top: 0; position: absolute; width: 100%; display: block !important; z-index: 1; } .carousel.fade .item:first-child { top: auto; position: relative; } .carousel.fade .item.active { opacity: 1; -moz-transition: opacity ease-in-out .7s; -o-transition: opacity ease-in-out .7s; -webkit-transition: opacity ease-in-out .7s; transition: opacity ease-in-out .7s; z-index: 2; } .carousel-control { z-index: 2; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <nav id="#custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> krishh kidss zone</a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse navbar-menubuilder"> <ul class="nav navbar-nav navbar-right"> <li><a href="about.html">about </a> </li> <li><a href="whykrishkids.html">why krishh kidss</a> </li> <li><a href="admission.html">admissions</a> </li> <li><a href="events.html">events</a> </li> <li><a href="gallery.html">gallery</a> </li> <li><a href="achivements.html">achivements</a> </li> <li><a href="contact.html">contact us</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <!-- full page image background carousel header --> <header id="mycarousel" class="carousel fade"> <!-- indicators --> <ol class="carousel-indicators"> <li data-target="#mycarousel" data-slide-to="0" class="active"></li> <li data-target="#mycarousel" data-slide-to="1"></li> <li data-target="#mycarousel" data-slide-to="2"></li> </ol> <!-- wrapper slides --> <div class="carousel-inner"> <div class="item active"> <!-- set first background image using inline css below. --> <div class="fill" style="background-image:url('http://desktop-pictorials.com/singlescreen/singlepage01/island002-1920x1080.jpg');"></div> </div> <div class="item"> <!-- set second background image using inline css below. --> <div class="fill" style="background-image:url('http://img.phombo.com/img1/photocombo/4448/the_best_hd_hq_hi-res_wallpapers_collection_-_cityscape_by_tonyx__145_pictures-61.jpg_hdtv_monaco_1920x1080.jpg');"></div> </div> <div class="item"> <!-- set third background image using inline css below. --> <div class="fill" style="background-image:url('https://interfacelift.com/wallpaper/7yz4ma1/01407_harboursunset_1920x1080.jpg');"></div> </div> </div> <!-- controls --> <a class="left carousel-control" href="#mycarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#mycarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </header> <div class="container"> <!-- marketing icons section --> <div class="row"> <div class="col-lg-12"> <h1 class="page-header"> krishh kidss zone </h1> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h4>vision</h4> </div> <div class="panel-body"> <p>"to make child grow complete personality , develop strength meet challenges ahed." <br/> <br/> <br/> <br/> </p> <div class="text-center"> <a href="vision.html" class="btn btn-default">read more</a> </div> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h4>about us</h4> </div> <div class="panel-body"> <p>we have started krishh kidss zone pre school in 11th february 2010 motto give best primary education children out burden. adopt simple , effective slogan “where learning fun” , focus on children’s learning of fun.</p> <div class="text-center"> <a href="about.html" class="btn btn-default">read more</a> </div> </div> </div> </div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"> <h4>events</h4> </div> <div class="panel-body"> <p>we celebrate each , every festivals , days part of our curriculam. children know , understand impotance of festivals , days. try fill colours in education celebrating such events. <br/> <br/> </p> <div class="text-center"> <a href="events.html" class="btn btn-default">see more</a> </div> </div> </div> </div> </div> <!-- features section --> <!-- /.row --> <hr> <!-- call action section --> <div class="well"> <div class="row"> <div class="col-md-8"> <h3> contact us:</h3> <p>adress: <br/>18 sarita vihar, <br/>opp. kartavya bunglows, <br/>anand nadiad road, <br/>lambhvel, 387-310 <br/>anand, gujarat</p> <br/> </div> <div class="col-md-4"> <p>contact details <br/>ph.no. +91 99799 64200 <br/>like on facebook <ul class="list-unstyled list-inline list-social-icons"> <li> <a href="https://www.facebook.com/krishkidszone?fref=ts"><i class="fa fa-facebook-square fa-2x"></i></a> </li> </ul> </p> <p>copyright © krishh kidss zone 2015</p> <p>developed by: shree infotech ltd.</p> </div> </div> </div> <hr> <!-- footer --> </div> <!-- /.container -->
Comments
Post a Comment