Why my container not give me as width as width in my css, more small

[dauruk0512]

Hello CSSER,

 

i have trouble that about my container it give me small container than css here is my setting css

/*css container default*/@media (min-width: 1200px) {  .container {    width: 1024px;  box-shadow: 0 0 30px grey;	}}

and this is my whole css

<link href="<?php echo base_url()?>asset/css/bootstrap.min.css" rel="stylesheet"><link href="<?php echo base_url()?>asset/css/bootstrap.css" rel="stylesheet"><script	src="<?php echo base_url()?>asset/js/bootsrap.js" type="text/javascript" ></script><link rel="shortcut icon" href="<?php echo base_url()?>asset/img/favicon.png"><!-- http://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries--><!--Large desktops and laptops--><link rel='stylesheet' media='screen and (min-width: 1200px) ' href='<?php echo base_url() ?>asset/css/largedesktop.css' /><!-- Landscape tablets and medium desktops--><link rel='stylesheet' media='screen and (min-width: 992px) and (max-width: 1199px) ' href='<?php echo base_url() ?>asset/css/landscapetablet.css' /><!-- Portrait tablets and small desktops--><link rel='stylesheet' media='screen and (min-width: 768px) and (max-width: 991px)' href='<?php echo base_url() ?>asset/css/portraittablet.css' /><!--Landscape phones and portrait tablets --><link rel='stylesheet' media='screen and (max-width: 767px) ' href='<?php echo base_url() ?>asset/css/landscapephone.css' /><!-- Portrait phones and smaller --><link rel='stylesheet' media='screen and (max-width: 480px) ' href='<?php echo base_url() ?>asset/css/portraitphone.css' /><!-- default --><link rel='stylesheet'  href='<?php echo base_url() ?>asset/css/default.css' /><script type="text/javascript" src="<?php echo base_url()?>asset/js/jquery.min.js"></script><script type="text/javascript" src="<?php echo base_url()?>asset/js/bootstrap.min.js"></script>

i have been searching and feel my structure css and js is wrong but dont know how to make it right position, i make container default in

<!-- default --><link rel='stylesheet'  href='<?php echo base_url() ?>asset/css/default.css' />

Thanks for any respond

 

Freddy

[dsonesuk]

Default css should be css that does not involve media queries, it is css applied before media queries change these default stying as screen size changes and MUST be placed ABOVE any media queries. For example any screen size greater than 1200px will use default styling until such a time it falls below 1200px then the media query stying for this screen size will kick in to apply styling within it.

[dauruk0512]

yes you are right, yesterday i remove the width

@media (min-width: 1200px) {  .container {   /* width: 1024px;  */  box-shadow: 0 0 30px grey;	}}

for everyone who want to make responsive don't make default container, thanks !

 

by the way how can i make every post sign as solved is it possible give +1 when members answer good question

 

Freddy

Edited June 17, 2015 by dauruk0512

[dauruk0512]

Another issue !

i want that make my navbar also has responsive every screen but my navbar has fixed and scroll by click href, but forget it cause i have inspect element by firebug nothing wrong,

 

my first design is only for 1024 px then my boss ask me to rebuild to be responsive , so i did in the progress

 

when my screen only 1024 my navbar working well her eis my old html with 1024 where is class containerdefault i set with width 1024 px, so in my navbar css i set width 100$ so whenever i resize it give me with 100%, right !

<div class="row"><nav class="navbar navbar-default subMenu containerdefault">  <div class="container-fluid">    <div class="navbar-header">     </div>    <div>        <ul class="nav navbar-nav" id="navlist">			        <li><a href="#fasilitas">Fasilitas</a></li>			        <li><a href="#testtimoni">Testimoni</a></li>			        <li><a href="#praktek">Praktek</a></li> 			        <li><a href="#contact">Kontak</a></li> 				        <li><a href="#">Tanya Jawab</a></li> 										</ul>    </div>  </div></nav></div>

but when i try responsive i remove default container cause it give me not good in design and also my navbar not give me as 100% each screen here my new html css i remove container default, Thanks for any respond

<div class="row"><nav class="navbar navbar-default subMenu">  <div class="container-fluid">    <div class="navbar-header">       </div>    <div>      <ul class="nav navbar-nav" id="navlist">			        <li><a href="#fasilitas">Fasilitas</a></li>			        <li><a href="#testimoni">Testimoni</a></li>			        <li><a href="#praktek">Praktek</a></li> 			        <li><a href="#contact">Kontak</a></li> 				        <li><a href="#">Tanya Jawab</a></li> 		</ul>    </div>  </div></nav></div>

[dauruk0512]

Solved by adding class contanier, feel happy and scare dont know in english if in indonesia (Deg-degan) if it will broke in every screen in the future, Thanks i'm feeling happy love this forum !

<div class="row"><nav class="navbar navbar-default subMenu container">  <div class="container-fluid">    <div class="navbar-header">       </div>    <div>      <ul class="nav navbar-nav" id="navlist">			        <li><a href="#fasilitas">Fasilitas</a></li>			        <li><a href="#testimoni">Testimoni</a></li>			        <li><a href="#praktek">Praktek</a></li> 			        <li><a href="#contact">Kontak</a></li> 				        <li><a href="#">Tanya Jawab</a></li> 		</ul>    </div>  </div></nav></div>