• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Responsywność - błąd

0 głosów
74 wizyt
pytanie zadane 17 lutego 2018 w HTML i CSS przez Scypyon Gaduła (3,460 p.)
@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ę ?

2 odpowiedzi

0 głosów
odpowiedź 17 lutego 2018 przez Daniel90 Pasjonat (17,990 p.)
wybrane 17 lutego 2018 przez Scypyon
 
Najlepsza
Bo mu dałeś na sztywno szerokość w px.
komentarz 17 lutego 2018 przez Scypyon Gaduła (3,460 p.)
no tak, bez tej szerokości działa, jednak div wtedy jest z boku i nie da się go wyśrodkować
komentarz 17 lutego 2018 przez Scypyon Gaduła (3,460 p.)
problem rozwiązany, dodałem szerokość dopiero w media, śmiga, dzięki :)
0 głosów
odpowiedź 17 lutego 2018 przez pablop76 Szeryf (97,990 p.)
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)
komentarz 17 lutego 2018 przez Scypyon Gaduła (3,460 p.)
"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

Podobne pytania

0 głosów
1 odpowiedź 80 wizyt
0 głosów
1 odpowiedź 141 wizyt
pytanie zadane 22 października 2017 w HTML i CSS przez lastavenger Obywatel (1,070 p.)
0 głosów
1 odpowiedź 129 wizyt
pytanie zadane 9 października 2017 w HTML i CSS przez ShadoWs Bywalec (2,360 p.)
Porady nie od parady
Forum posiada swój własny serwer Discord, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.IRC

67,186 zapytań

114,135 odpowiedzi

241,913 komentarzy

46,173 pasjonatów

Przeglądających: 281
Pasjonatów: 8 Gości: 273

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...