Responsywność - błąd

Question

@media only screen and (min-width: 43em) {
	
	#my-skills-container {
	width: 680px;
	margin-left: auto;
	margin-right:auto;
	height: 1000px;
}

.skills-content-container {
	width: 340px;
	background-color: #fff;
	height: 100px;
	margin-top: 25px;
	float: left;
}

}
#my-skills-container {
	width: 340px;
	margin-left: auto;
	margin-right:auto;
	height: 1000px;
}
.skills-content-container {
	width: 340px;
	background-color: #fff;
	height: 100px;
	margin-top: 25px;
}

.skills-content-container .skills-content-logo {
	width: 100px;
	height: 100px;
	float: left;
}

.skills-content-container .skills-content-loading {
	width: 150px;
	height: 100px;
	float: left;
	margin-left: 30px;
}

.skills-content-container .skills-content-score {
	font-size: 2rem;
	text-transform: uppercase;
	width: 40px;
	height: 65px;
	float: left;
	margin-left: 20px;
	margin-top: 35px;
}

.my-skills-header {
	width: 100%;
	text-align: center;
	font-size: 40px;
	height: 70px;
}

.meter {
  position: relative;
  margin-top: 35px;
  width: 158px;
  height: 26px;
  border: 1px solid #000;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  overflow: hidden;
}
.meter .skills-loading-html{
  display: block;
  height: 100%;
  position: relative;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  background: transparent;
  -webkit-background-size: 45px 45px;
  -moz-background-size: 45px 45px;
  -o-background-size: 45px 45px;
  background-size: 45px 45px;
}
.meter .skills-loading-html:before {
  content: "";
  display: block;
  width: 0%;
  height: 100%;
  position: relative;
  top: 0%;
  background: rgba(241, 101, 41, 1);
  transition: width 0.5s ease-in-out;
}

.meter:hover.skills-loading-html::before,
.meter.full .skills-loading-html:before {
  width: 70%;
}

.meter .skills-loading-css {
  display: block;
  height: 100%;
  position: relative;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  background: transparent;
  -webkit-background-size: 45px 45px;
  -moz-background-size: 45px 45px;
  -o-background-size: 45px 45px;
  background-size: 45px 45px;
}
.meter .skills-loading-css:before {
  content: "";
  display: block;
  width: 0%;
  height: 100%;
  position: relative;
  top: 0%;
  background: rgba(41, 101, 241, 1);
  transition: width 0.5s ease-in-out;
}

.meter:hover.skills-loading-css::before,
.meter.full .skills-loading-css:before {
  width: 60%;
}

.meter .skills-loading-js {
  display: block;
  height: 100%;
  position: relative;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  background: transparent;
  -webkit-background-size: 45px 45px;
  -moz-background-size: 45px 45px;
  -o-background-size: 45px 45px;
  background-size: 45px 45px;
}
.meter .skills-loading-js:before {
  content: "";
  display: block;
  width: 0%;
  height: 100%;
  position: relative;
  top: 0%;
  background: rgba(253, 218, 62, 1);
  transition: width 0.5s ease-in-out;
}

.meter:hover.skills-loading-js::before,
.meter.full .skills-loading-js:before {
  width: 25%;
}

.meter .skills-loading-mysql {
  display: block;
  height: 100%;
  position: relative;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  background: transparent;
  -webkit-background-size: 45px 45px;
  -moz-background-size: 45px 45px;
  -o-background-size: 45px 45px;
  background-size: 45px 45px;
}
.meter .skills-loading-mysql:before {
  content: "";
  display: block;
  width: 0%;
  height: 100%;
  position: relative;
  top: 0%;
  background: rgba(66, 183, 255, 1);
  transition: width 0.5s ease-in-out;
}

.meter:hover.skills-loading-mysql::before,
.meter.full .skills-loading-mysql:before {
  width: 40%;
}

<article>
	<div id="my-skills-container">
	<div class="my-skills-header">
			<h1><i>My Skills...</i></h1>
	</div>
	<div class="skills-content-container">
		<div class="skills-content-logo">
			<img src="img/logo-html.png" title="Logo HTML"></img>
		</div>
		<div class="skills-content-loading">
			<div id="meter" class="meter" onmouseover="full(this);"><span class="skills-loading-html"></span></div>
		</div>
		<div class="skills-content-score">
			72%
		</div>
	</div>
	
	<div class="skills-content-container">
		<div class="skills-content-logo">
			<img src="img/logo-css.png" title="Logo CSS"></img>
		</div>
		<div class="skills-content-loading">
			<div id="meter" class="meter" onmouseover="full(this);"><span class="skills-loading-css"></span></div>
		</div>
		<div class="skills-content-score">
			60%
		</div>
	</div>
	
		<div style="clear:both;"></div>
		
	<div class="skills-content-container">
		<div class="skills-content-logo">
			<img src="img/logo-js.png" title="Logo JS"></img>
		</div>
		<div class="skills-content-loading">
			<div id="meter" class="meter" onmouseover="full(this);"><span class="skills-loading-js"></span></div>
		</div>
		<div class="skills-content-score">
			25%
		</div>
	</div>
	
	<div class="skills-content-container">
		<div class="skills-content-logo">
			<img src="img/logo-mysql.png" title="Logo MySQL"></img>
		</div>
		<div class="skills-content-loading">
			<div id="meter" class="meter" onmouseover="full(this);"><span class="skills-loading-mysql"></span></div>
		</div>
		<div class="skills-content-score">
			40%
		</div>
	</div>
	
	<div style="clear:both;"></div>
	
	</div>
	</article>

Czy mógłby mi ktoś wytłumaczyć dlaczego div o id "my-skills-container" nie rozszerza się ?

Answer 1

Bo mu dałeś na sztywno szerokość w px.

Comments

no tak, bez tej szerokości działa, jednak div wtedy jest z boku i nie da się go wyśrodkować

---

problem rozwiązany, dodałem szerokość dopiero w media, śmiga, dzięki :)

Answer 2

Najpierw nadajesz mu 680px a potem 340px. Kaskadowość arkusza stylów CSS polega na tym, że przypisywany jest styl ostatni na liście(pomijając stopień ważnośći oraz !important). Dwa razy ostylowujesz #my-skills-container  do tego prawie tak samo tylko z innym width. (Myślę, że zapomniałeś umieścić te style w innym @media, ale i tak nie trzeba przepisywać tego co się powtarza)

Comments

"ale i tak nie trzeba przepisywać tego co się powtarza" - ciekawa uwaga, już poprawiam, a jeżeli chodzi o te media, to najpierw chciałem ,aby container miał 340px a potem 680px, rozwiązałem problem tak ,że najpierw nie podawałem "width" i szerokość dostosowała się automatycznie do 340px , ponieważ w tym cointainerze był drugi z taką szerokością, i dopiero potem wymusiłem 680px, tak aby w 1 containerze zmieściły się 2 mniejsze o szerokości 340px - 1