[Bootstrap] Niepoprawne wyświetlanie się strony na telefonie.

0

Witam, otóż mój problem polega na tym że strona na najmniejszej szerokości ekranu wyświetla się niepoprawnie. O ile gdy zmniejszam szerokość przeglądarki do minimum wszystko działa bez zarzutu, ale gdy odpalam stronę na telefonie to divy ze znacznika <main> wylewają się poza ekran. Cały znacznik footer nakłada się na reklamy, które wyświetlają się na hostingu prv.pl

www.fargo-graphics.prv.pl


```<!DOCTYPE html>
<html lang="pl">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135067253-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-135067253-1');
</script>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
	<title>Grafika dla twojej firmy | Fargo Graphics</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="Damian Świtek">
	<meta http-equiv="X-Ua-Compatible" content="IE=edge">
	<link rel="stylesheet" href="main.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/fontello.css"
	
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext" rel="stylesheet">
	
	<!--[if lt IE 9]>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
	<![endif]-->
</head>
	  <body>
		  <header>
			  	
                <!--navigation-->
			  	<nav class="navbar navbar-light bg-white navbar-expand-lg">

                    <a class="navbar-brand" href"#"><img src="img/logo.png" width="auto" height="80" margin-left="200" class="d-inline-block"></a>
              

                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false"> 
                    	<span class="navbar-toggler-icon"></span>
                    </button>


                    <div class="collapse navbar-collapse" id="mainmenu" style="margin-left: 15px;">
                    	
					     <ul class="navbar-nav mr-auto">
					     	<li class="nav-item" active>
					     	<a class="nav-link" href="#" > HOME </a><li>
					     	
					     	<li class="nav-item dropdown">
					     	<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-expanded="false" id="submenu" aria-haspopup="true"> OFERTA </a>
					     				
					     		<div class="dropdown-menu" aria-labelledby="submenu">
					     					<a class="dropdown-item" href="#"> WIZYTÓWKI </a>
					     					<a class="dropdown-item" href="#"> ULOTKI </a>
					     					<a class="dropdown-item" href="#"> PLAKATY </a>
					     					<a class="dropdown-item" href="#"> LOGOTYPY </a>
					     		</div>
					     	</li>

					     	<li class="nav-item">
					     	<a class="nav-link" href="#"> PORTFOLIO </a></li>

					     	<li class="nav-item">
					     	<a class="nav-link" href="#"> WSPÓŁPRACA </a></li>

					     	<li class="nav-item">
					     	<a class="nav-link" href="#"> KONTAKT </a></li>
					     </ul>


                          <form class="form-inline" style="margin-right: 10px;">

		                      <input class="form-control" type="search" placeholder="..." aria-label="wyszukaj">

		                      <button class="btn btn-light" type="submit">Szukaj</button>


                          </form> 


                       <div class="socialmedia" style="margin-right: 15px;">
			               <div class="fb" style="display: inline-block;"><a href="https://www.facebook.com/fargographicsstudio"><i class="icon-facebook"></i></a></div>
			               <div class="instagram" style="display: inline-block;"><i class="icon-instagram"></i></div>
			               <div class="google" style="display: inline-block;"><i class="icon-gplus"></i></div>
			           </div>


                   


                    </div>

                </nav>
		  </header>
		  <main> 

          <div class="container-fluid">

		  	<div class="slider"><img src="img/slider3.jpg"></div>

				</div>

				<section class="projects">
		
			<div class="container">

				<div class="row">
					
					<header>
						
						<h1>Projekty graficzne na każdą okazję</h1>
  <p>Realizując u nas swoje zamówienie masz pewność rzetelnie wykonanej pracy. Wykonujemy projekty w oparciu o najnowsze trendy i z pełnym zaangażowaniem tak aby klient był w 100% zadowolony z efektów. Możemy wykonać dla Ciebie projekty wizytówek, plakatów, ulotek, logotypów, layoutów lub bardziej spersonalizowanych projektów. Jesteśmy gotowi podjąć się każdego wyzwania.</p>
							
					</header>
						
					<div class="col-sm-6">
					
						<figure>
							<a href="#"><img src="img/wizytowki.jpg" alt="Wizytówki"></a>
							<figcaption>Wizytówki</figcaption>
						</figure>
					
					</div>
					
					<div class="col-sm-6">
					
						<figure>
							<a href="#"><img src="img/ulotki.jpg" alt="Ulotki"></a>
							<figcaption>Ulotki</figcaption>
						</figure>
					
					</div>
                    
                    <div class="col-sm-6">
					
						<figure>
							<a href="#"><img src="img/plakaty.jpg" alt="Plakaty"></a>
							<figcaption>Plakaty</figcaption>
						</figure>
					
					</div>
					
					<div class="col-sm-6">
					
						<figure>
							<a href="#"><img src="img/layouty.jpg" alt="Layouty"></a>
							<figcaption>Layouty</figcaption>
						</figure>
					
					</div>
					
				</div>	
			</div>	
				
		</section>

				

	     

	      </main>
		  
		  <!--footer-->
		  <footer class="container-fluid" style="background-color: lightgrey; padding-top: 20px;">
				        <div class="footer row">
				        <div class="col-sm-6 col-md-3 text-center">
				            <ol style="list-style-type: none;">
				                <li><a href="#">O nas</a></li>  
				                <li><a href="#">Współpraca</a></li>
				                <li><a href="#">Regulamin</a></li>
				                <li><a href="#">Kontakt</a></li>
				            </ol>
				        </div>
				        <div class="col-sm-6 col-md-3 text-center">
				            <h1>Kontakt</h1>
				            <p><b>FARGO-GRAPHICS S.C</b><br>Orlik-Ruckemanna 19/9<br>42-200, Częstochowa<br>tel. 505 124 677</p>
				        </div>
				        <div class="col-sm-6 col-md-3 text-center">
				            <div class="fb d-inline-block"><i class="icon-facebook"></i></div>
				            <div class="instagram d-inline-block"><i class="icon-instagram"></i></div>
				            <div class="google d-inline-block"><i class="icon-gplus"></i></div>
				        </div>
				        <div class="col-sm-6 col-md-3 text-center">
				            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2521.396375033549!2d19.144970078896577!3d50.80529439950043!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4710b5babc0aa9e7%3A0x4fa9b1335f335972!2sGenera%C5%82a+Wilhelma+Orlik-R%C3%BCckemanna+19%2C+42-200+Cz%C4%99stochowa!5e0!3m2!1spl!2spl!4v1550933693907" style="border:0" allowfullscreen="" frameborder="0"></iframe>
				        </div>
				    </div>
				    <div class="stopka row justify-content-center"><center>DAMIAN ŚWITEK © 2018</center></div>
          </footer>


				 <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
				
				 <script src="js/bootstrap.min.js"></script>
	  </body>
</html>



body {
	background-color: white;
	color: #efefef;
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
}

.navbar-brand {
	margin-left: 10px;
}

.navbar {
	border-bottom: 1px darkgrey solid;
	box-shadow: 0 0 1em darkgrey;
	position: fixed;
}

.slider img {
	width: 100%;
}

.container-fluid {
	width: 100%;
}

.container {
	width: 100%;
}


h1
{
	font-size: 36px;
	font-weight: 400;
	color: #C0D06F;
	margin: 20px;
}

.projects
{
	text-align: center;
}

.projects img
{
	width: 100%;
	height: auto;
}

.projects p
{
	margin-bottom: 30px;
}

.projects figcaption
{
	margin-top: 8px;
}
0
czysteskarpety napisał(a):

Masz błędy w składni:
https://validator.w3.org/nu/?doc=http%3A%2F%2Ffargo-graphics.prv.pl%2F

Akurat w mainie nie ma żadnego błędu. Ewidentnie widać że obrazki w mainie rozpychają stronę. Co zmienić w kodzie żeby one się nie wylewały ?

1 użytkowników online, w tym zalogowanych: 0, gości: 1