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

Cała responsywność strony psuje sie bo zejściu do poziomu small DLACZEGOOO?

Object Storage Arubacloud
0 głosów
204 wizyt
pytanie zadane 24 listopada 2020 w Offtop przez Igorek Mądrala (6,290 p.)

kod html:

<!DOCTYPE html>
<html lang="pl">
<head>
<title>nazwa</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="IgOrEk"/>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="style.css"/>
<link rel="shortcut icon" href="img/icon.png"/>


</head>
<body>
	<div class="container">
		<div class="row justify-content-center">
			
				<i class="description col-12">Ekscytujące motto strony</i>
				
				<h3 class="name"  style="letter-spacing: 5px;">nazwa</h3>
				
			    <span class="description col-12" >opis ambitny</span>
		    
		    
		    
		

		<div class="footer col-12"><a href="glowna" class="kontaktlink">nazwa &reg;
		    </a> | Wszelkie prawa zastrzeżone &copy; | <a href="kontakt" class="kontaktlink">Kontakt
		    </a>
			
		</div>
		</div>
   	</div>

    



    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>

kod css:

body
{
	background-image: url(img/tlo.png);
	color: white;

}


.description{
	
	font-size: 20px;
	font-family: Impact;
	cursor: default;
	display: inline-block;
}

.container{
	width: 900px;
	
	margin: auto;
	text-align: center;
	
}
.name{
	font-family: 'Comic Sans MS';
	font-size: 50px;
	cursor: default;
	display: inline-block;
	
}

.name:hover{
	color: orange;
}
.description:hover{
	color: orange;
}

.kontaktlink{
	color: white;
	text-decoration: none;
	cursor: pointer;
}

.kontaktlink:hover{
	color: orange;
	
}


.footer{
	display: inline-block;
	font-size: 15px;
	position: absolute;
	bottom: 5px;
	left: 0;
	right: 0;
	text-align: center;
}

.boxco{
	margin: 0;
	text-align: center;
	cursor: default;
}

.kontakt{
	font-size: 30px;
	font-family: Courier;
	font-weight: bold;
	text-decoration: none;
	color: white;
	display: inline-block;
}

.kontakt:hover{
	color: orange;
}

.titleGame{
	display: inline-block;
	color: white;
	border: 2px dotted orange;
	padding: 10px;
	border-radius: 5px;
}


.titleGame:hover{
	
	color: orange;
	border: 2px dotted white;
}

.download{
	text-decoration: none;
	background-color: #ffa500;
	padding: 10px;
	font-size: 15px;
	color: black;
	font-family: Impact;
	cursor: pointer;
	border: 2px solid white;
	border-radius: 5px;
}

.download:hover{
	background-color: #ffc252;
	color: #212121;
}

(tam w css są tez inne klasy ale to nie wazne)

 

Poprostu bo zwężeniu ekranu do extra small nagle strona zachowuje sie jakby nie była responsywna - "zeskakuje"

1 odpowiedź

0 głosów
odpowiedź 24 listopada 2020 przez antypop Mądrala (5,730 p.)
wybrane 24 listopada 2020 przez Igorek
 
Najlepsza
.container{
    width: 900px;
    margin: auto;
    text-align: center;
     
}

W klasie .container masz niepotrzebnie ustawioną szerokość, jak to usuniesz to treść powinna zacząć zachowywać się tak jak oczekujesz.

 

komentarz 24 listopada 2020 przez Igorek Mądrala (6,290 p.)
dzieki za znalezienie! domyślałem sie że jakiś mój  błąd w css ale nie mogłem go znaleźć

Podobne pytania

0 głosów
2 odpowiedzi 237 wizyt
pytanie zadane 23 marca 2016 w HTML i CSS przez azybad Mądrala (5,500 p.)
0 głosów
1 odpowiedź 433 wizyt
+1 głos
1 odpowiedź 321 wizyt
pytanie zadane 7 kwietnia 2017 w HTML i CSS przez Marek123 Początkujący (270 p.)

92,669 zapytań

141,567 odpowiedzi

320,033 komentarzy

62,034 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...