@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ę ?