css - Bootstrap responsive scaling issue on smaller than 1920 x 1080 resolutions -


i have private video site that's main aimed towards home networks , desktop computers, however, site constructed on 1920x1080 resolution if that's smaller site looks catastrophe. here code page.

<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">     <div style="width:66%" class="container">         <div  class="navbar-header">             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">                 <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="navbar-collapse collapse" id="navbar-collapsible">             <ul class="nav navbar-nav navbar-left">                 <li><a href="index.php">network tv</a></li>             </ul>         </div>     </div> </nav> <div class="col-md-4 col-md-offset-3" style="width:100%; height=:100%; color:black; margin-top:13%; text-align:center; border: 0">   <div class="row center-row">     <div style="width:10%" class="col-md-4"><div style="background-color:transparetn" class="well"><p><u><h4>season1</h4></u></p></div></div>       <div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>season2<h4></u></p></div></div>       <div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>season3</u></p></div></div>       <div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>season4</h4></u></p></div></div>       <div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>season5</h4></u></p></div></div>     </div> </div>

what want know

my question why not scale down properly, when screen smaller want margins adjust fix screen, instead goes vertical list mixed , improperly scaled

if using bootstrap have no need inline styles, setting inline widths html taking away makes bootstrap "boostrap" sizing, bootstrap has grid system, if follow grid system, site work correctly. please read: w3 fools has great starting point begginers. http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

also, after looking @ code noticed have col-4 set 10% width, not work that. col-4, more 33% if using common 12 column grid. means setting col-4 10% on riding bootstrap key features , why not working you.


Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

jquery - javascript onscroll fade same class but with different div -

i new @ javascript , want learn new. there wrong code : why div fades @ same time. i want ask how fade different div s same class name.can me , explain me. thanks in advance. javascript: $(window).scroll(function(){ if ($( "div.fade" ).offset().top - $(window).scrolltop() <= 100){ $('.fade').addclass( "fade-in"); } else { $('.fade').removeclass("fade-in"); } }); here jsfiddle onscroll = function () { var scrolltop = $(this).scrolltop() ; $("div.fade").each(function(){ if(($(this).offset().top - scrolltop) <= 100){ $(this).toggleclass("fade-in"); } }) }
Read more