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

Bootstrap - Oddalony widok strony w wersji mobilnej

Object Storage Arubacloud
+1 głos
153 wizyt
pytanie zadane 13 września 2018 w HTML i CSS przez domi10052 Obywatel (1,180 p.)

Dzień Dobry!

Tym razem mam problem gdyż moja strona jest malutka na telefonie - bootstrap coś tam niby skaluje ale cały content jak i nagłówek jest bardzo mały. Jak to naprawić?

Z góry dziękuję! Poniżej załączam kod i screen-shot.

<!DOCTYPE HTML>
<html lang="pl">

<html>
	<head>
		<meta charset="utf-8"/>
		<title>TechCan</title>
		<meta name="description" content="Strona projektu na konkurs CanSat 2019 poland" />
		<meta name="keywords"  content="CanSat, kopernik, 2019, team, esero, technikum"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
		<link rel="stylesheet" href="style.css"/>
		<link href="https://fonts.googleapis.com/css?family=Days+One" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Quicksand:300,500&amp;subset=latin-ext" rel="stylesheet">

		
	</head>
	
	<body class="bg-light">
		<header>
			
		<header>
			
			<nav class="navbar navbar-dark bg-primary navbar-expand-lg">
				<a class="navbar-brand mr-lg-5" href="index.html">
					<img class="mr-3 ml-5" src="logo1.png" width="30" height="auto" alt=""/> <span style="font-family: 'Quicksand', sans-serif; font-weight: 300">Tech</span>CAN
				</a>
				
				<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#mainmenu">
					<span class="navbar-toggler-icon"></span>
				</button>
				
				<div class="collapse d-lg-flex ml-5 navbar-collapse" id="mainmenu">
					<ul class="navbar-nav mb-1">
					
						<li class="nav-item mr-5"> 
							<a class="nav-link" href="Start.html"> START </a>
						</li>
						<li class="nav-item mr-5"> 
							<a class="nav-link" href="#"> PROJEKT </a>
						</li>
						<li class="nav-item mr-5"> 
							<a class="nav-link" href="#"> EKIPA </a>
						</li>
						<li class="nav-item mr-5"> 
							<a class="nav-link" href="#"> KONTAKT </a>
						</li>
					
					</ul>	
				</div>
			</nav>
		
			
			<div class="jumbotron d-flex justify-content-center align-items-center welcome bg-light">
				<div class = "container text-center">
					<div class="flex-row">
						<div class = "col">
							<h1 style="font-size: 50px; font-family: 'Days One', sans-serif; font-weight: 500;">  <span style="font-family: 'Quicksand', sans-serif;">Tech</span>CAN <span style="font-family: 'Quicksand', sans-serif;">Team</span>  </h1>
						</div>
						<div class = "col mb-4">
							<h5 style="font-size: 40px;"> CanSat 2019 </h5>
						</div>
						<a href="Start.html"> <button type="button" class="btn btn-primary btn-lg">LEARN MORE</button></a>
					</div>
				</div>
			</div>
		</header>

		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
		
	</body>
	
</html>
body {
	/*font-family: 'Comfortaa';*/
	font-family: 'Quicksand', sans-serif;
}

.row {
	margin-left: 0px;
	margin-right: 0px;
}

nav {
	font-size: 20px;
	font-weight: 500;
}

.navbar-brand {
	font-family: 'Days One', sans-serif;
}

.welcome 
{
	min-height: 75vh;
	background-color: #DDDDDD;
}

body::-webkit-scrollbar {
	width:4px;
	height: 5px;
}

body::-webkit-scrollbar-thumb {
	background-color: #afafaf;
	border-radius: 2px;
	height: 5px;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(224, 224, 224, 1);
}

h1 {
	font-weight: 300;
}

p {
	text-align: justify;
	font-size: 20px;
}

 

1 odpowiedź

+1 głos
odpowiedź 13 września 2018 przez Grzegorz :> Dyskutant (8,050 p.)
wybrane 13 września 2018 przez domi10052
 
Najlepsza
Chyba zapomniałeś wstawić:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0>
1
komentarz 13 września 2018 przez domi10052 Obywatel (1,180 p.)
Dziękuję! Pomogło - nawet o tym nie wiedziałem, że taka linijeczka magiczna istnieje :)

Podobne pytania

0 głosów
1 odpowiedź 149 wizyt
0 głosów
1 odpowiedź 527 wizyt
pytanie zadane 20 kwietnia 2018 w PHP przez Kolberg Obywatel (1,560 p.)
0 głosów
1 odpowiedź 387 wizyt

92,595 zapytań

141,444 odpowiedzi

319,717 komentarzy

61,980 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...