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

question-closed Wersja mobilna strony

Object Storage Arubacloud
0 głosów
227 wizyt
pytanie zadane 2 sierpnia 2018 w HTML i CSS przez pabloliquidar Nowicjusz (240 p.)
zamknięte 3 sierpnia 2018 przez pabloliquidar

Witam stworzyłem mobilną wersję strony natomiast nie chce się dopasować do ekranu telefonu. Po prawej stronie mam ogromny margines którego chciałbym się pozbyć. Proszę o wyrozumiałość to moja pierwsza strona :). Oczywiście w index.html znajduje się skrypt który sprawdza szerokość wyświetlacza telefonu. Ustawiłem tam 768. Proszę o poinformowanie jeśli jest jakaś lepsza rozdzielczość

<!DOCTYPE html>

<html lang="pl">

  <head>

     <meta charset="utf-8">
     <title>KonradWelenc</title>

     <meta name="description" content="Opis zawartości strony dla wyszukiwarek">
     <meta name="keywords" content="słowa, kluczowe, opisujące, zawartość">
     <meta name="author" content="PabloLiquidar">

     <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
     <link rel="stylesheet" href="mstyle.css">
     <script src="skrypt.js"></script>
	 <link rel="stylesheet" href="css/fontello.css">
	
  </head>
  <body>
  <div id="container">
   
  
   
	<div style="clear:both;"></div>
  
  <div id="logo"><img src="img/mlogo.jpg"  alt="logo"/></div>
  
 <div style="clear:both;"></div>

 
   <div style="clear:both;"></div>
  
		<div id="zdjeciakoncert">
		<div id= "wydarzenie1"><i class="icon-camera">Koncert</i></div>
		  <div class="zdjkoncert"><img src="img/koncert1.jpg" alt="koncert1"/></div>
		  <div class="zdjkoncert"><img src="img/koncert2.jpg" alt="koncert2"/></div>
		  <div class="zdjkoncert"><img src="img/koncert3.jpg" alt="koncert3"/></div>
		  <div class="zdjkoncert"><img src="img/koncert4.jpg" alt="koncert4"/></div>
		<div class="zdjkoncert"><img src="img/koncert5.JPG" alt="koncert5"/></div>									
		  <div class="zdjkoncert"><img src="img/koncert6.jpg" alt="koncert6"/></div>
		  <div class="zdjkoncert"><img src="img/koncert7.jpg" alt="koncert7"/></div>
		  <div class="zdjkoncert"><img src="img/koncert8.jpg" alt="koncert8"/></div>
		<div class="zdjkoncert"><img src="img/koncert9.JPG" alt="koncert9"/></div>
		  <div class="zdjkoncert"><img src="img/koncert10.jpg" alt="koncert10"/></div>
		  <div class="zdjkoncert"><img src="img/koncert11.jpg" alt="koncert11"/></div>
		  <div class="zdjkoncert"><img src="img/koncert12.jpg" alt="koncert12"/></div>
		  <div class="zdjkoncert"><img src="img/koncert13.jpg" alt="koncert13"/></div>
		  <div class="zdjkoncert"><img src="img/koncert14.jpg" alt="koncert14"/></div>
		  <div class="zdjkoncert"><img src="img/koncert15.jpg" alt="koncert15"/></div>
		  <div class="zdjkoncert"><img src="img/koncert16.jpg" alt="koncert16"/></div>
		  <div class="zdjkoncert"><img src="img/koncert17.jpg" alt="koncert17"/></div>
		  <div class="zdjkoncert"><img src="img/koncert18.jpg" alt="koncert18"/></div>
		  <div class="zdjkoncert"><img src="img/koncert19.jpg" alt="koncert19"/></div>
		  <div class="zdjkoncert"><img src="img/koncert20.jpg" alt="koncert20"/></div>
		  <div class="zdjkoncert"><img src="img/koncert21.jpg" alt="koncert21"/></div>
		  <div class="zdjkoncert"><img src="img/koncert22.jpg" alt="koncert22"/></div>
		  <div class="zdjkoncert"><img src="img/koncert23.jpg" alt="koncert23"/></div>
		  <div class="zdjkoncert"><img src="img/koncert24.jpg" alt="koncert24"/></div>
		  <div class="zdjkoncert"><img src="img/koncert25.jpg" alt="koncert25"/></div>
		  <div class="zdjkoncert"><img src="img/koncert26.jpg" alt="koncert26"/></div>
		  <div class="zdjkoncert"><img src="img/koncert27.jpg" alt="koncert27"/></div>
		  <div class="zdjkoncert"><img src="img/koncert28.jpg" alt="koncert28"/></div>
		  <div class="zdjkoncert"><img src="img/koncert29.jpg" alt="koncert29"/></div>
		  <div class="zdjkoncert"><img src="img/koncert30.jpg" alt="koncert30"/></div>
		  <div class="zdjkoncert"><img src="img/koncert31.jpg" alt="koncert31"/></div>
		  <div class="zdjkoncert"><img src="img/koncert32.jpg" alt="koncert32"/></div>
		  
		  
		  
		</div> 
  <div style="clear:both;"></div>
  
 

	<div id="zdjeciaportret">
	<div id= "wydarzenie2"><i class="icon-camera">Portrety</i></div>
			<div class="zdjportret"><img src="img/portret1.jpg" alt="portret1"/></div>
			<div class="zdjportret"><img src="img/portret2.jpg" alt="portret2"/></div>
			<div class="zdjportret"><img src="img/portret3.jpg" alt="portret3"/></div>
			<div class="zdjportret"><img src="img/portret4.jpg" alt="portret4"/></div>
			<div class="zdjportret"><img src="img/portret5.jpg" alt="portret5"/></div>
			<div class="zdjportret"><img src="img/portret6.jpg" alt="portret6"/></div>
			<div class="zdjportret"><img src="img/portret7.jpg" alt="portret7"/></div>
			<div class="zdjportret"><img src="img/portret8.jpg" alt="portret8"/></div>
			<div class="zdjportret"><img src="img/portret9.jpg" alt="portret9"/></div>
			<div class="zdjportret"><img src="img/portret10.jpg" alt="portret10"/></div>
			<div class="zdjportret"><img src="img/portret11.jpg" alt="portret11"/></div>
			<div class="zdjportret"><img src="img/portret12.jpg" alt="portret12"/></div>
			<div class="zdjportret"><img src="img/portret13.jpg" alt="portret13"/></div>
			<div class="zdjportret"><img src="img/portret14.jpg" alt="portret14"/></div>
			<div class="zdjportret"><img src="img/portret15.jpg" alt="portret15"/></div>
			<div class="zdjportret"><img src="img/portret16.jpg" alt="portret16"/></div>
				
			
			
		
			
		
		</div>
 <div style="clear:both;"></div>
 
 <div id="info"><i class="icon-user">O mnie</i></div>
	<div id="omnie">
	<p>dsfsdf</p>
<p>fdsfdsfs.</p> 
<p>fdsfdsfdsf.</p>
<p>dsfsdafs</p></div>

<div id="formularz">
<h2>Formularz kontaktowy</h2>

<form method="post" action="/send.php" id="contact_form">
     <div><label for="name"></label></div>
     <div><input type="text" name="name" id="name" class="formField" placeholder="Imię i nazwisko" onfocus="this.placeholder=''" onblur="this.placeholder='Imię i nazwisko'"/> </div>
     <div><label for="phone"></label></div>
     <div><input type="text" name="phone" id="phone" class="formField" placeholder="Numer telefonu" onfocus="this.placeholder=''" onblur="this.placeholder='Numer telefonu'"/> </div>
     <div><label for="email"></label></div>
     <div><input type="text" name="email" id="email" class="formField" placeholder="Adres email" onfocus="this.placeholder=''" onblur="this.placeholder='Adres email'"/> </div>
     <div><label for="message"></label></div>
     <div><textarea name="message" id="message" class="formField" placeholder="Treść wiadomości" onfocus="this.placeholder=''" onblur="this.placeholder='Treść wiadomości'"></textarea></div>
     <div><button type="submit" id="wyślij">Wyślij</button></div>
</form>
</div>

<div id="footer"> &copy;  Copyright 2018 by PabloLiquidar. All rights reserved</div>

  </div> 
 
 
 




  </body>
  
</html>
#container
{
		 width: 470px;
		 margin-right: 0px;
		
}

body
	{
		font-family: Georgia;
		 
	}

.socialki
{
	float:right;
	margin-left: 50%;
	margin-right: 50%;
}

#menu
{	  
	 
	  text-align: center;
	margin-top: 0;
	margin-left: 50%;
	margin-right: 50%;
	 
	}


 
	#logo
	{
	
	text-align: center;
	height: 249px;
	width: 100%;
	
	
	
	
	}
	
	#wydarzenie1
	{
		text-align: center;
		font-size: 	30px;
		margin-top: 60px;
		margin-bottom: 30px;
		
		
		
		
	}
	
	#wydarzenie2
	{
		text-align: center;
		font-size: 	30px;
		margin-top: 60px;
		margin-bottom: 30px;
		
			
	}

	.sticky
	{
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		
	}
	


		ol
		{
		
		list-style-type: none;
		font-size: 20px;
		height: 100px;
		line-height: 200%;
		display: inline-block;
		width: 100%;
		margin-left:50% ;
		margin-right: 50%;

		}
		ol a 
		{
			color: black;
			text-decoration: none;
			display: block;
			padding: 0;
			margin-top: 30px;
			
			
			
		}

		ol > li
		{
			float: none;
			width: 113px;
			height: 100px;
			border: 2px solid black;
			background-color:white;
			text-align: center;
			padding: 0;
			margin: 0;
			float: left;
			
			
		}
	
		ol > li > ul
		{
			list-style-type: none;
			padding: 0;
			margin: 0;
			height: 100px;
			display: none;
			
			
		}
		 ol > li > ul > li
		 {
			 border-top: 4px  solid black;
			 background-color: white;
			 position: relative;
			 z-index: 100;
			 width: 124px;
			
			 
		 }

	
	
	#zdjeciakoncert
	{
		
		margin-left: auto;
		margin-right: auto;
		margin-top: 400px;
		text-align: center;
		width: 100%;
		heigth: 233px;
	}
	.zdjkoncert
	{
		width: 100%;
		padding: 4px;							
		overflow: hidden;
	}
	.zdjkoncert img
	{
		transition: all 1s ease-in-out;
	}
	
	#zdjeciaportret
	{
		
		margin-top: 30px;
		margin-right: auto;
		margin-left: auto;
		text-align: center;
		width: 100% px;
		heigth: 233px;
	}
	
	.zdjportret
	{
		width: 100%;
		padding: 7px;
		overflow: hidden;										
	}
	.zdjportret img
	{
			transition: all 1s ease-in-out;
	}
	
	#info
	{
		text-align: center;
		font-size: 	30px;
		margin-top: 60px;
		margin-bottom: 30px;	
		width: 100%;
	}
	
		#fb
		{
			
			text-align: center;
		}
	
	#ig{
	text-align:center;
	}
	
	#formularz
	{
		
		-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
		-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
		box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
		margin-bottom: 100px;
		margin-top: 100px;
		background-image: url(img/connectwork.png);
		border: 2px solid black;
		color: white;
		width: 100%;
		text-align: center;
		margin: auto;
	}
	
	#omnie
	{
		text-align: center;
		font-size: 20px;
		padding-bottom: 200px;
		width: 100%;
		
	}
	#footer
	{
		text-align: center;
		width:100%px;
		margin-top: 20px;
	}
	
	/* hover effects */
	
	
	
			ol > li:hover > ul
		{
			display: block;
		}


	#ig:hover
	{
opacity : 0.70;
filter : alpha(opacity=70);
text-decoration: none;
color:white;
	}
	
	#fb:hover
	{
opacity : 0.70;
filter : alpha(opacity=70);
text-decoration: none;
color:white;
	}
	
			ol a:hover{
		opacity : 0.70;
		filter : alpha(opacity=70);
		}
												
	.zdjkoncert:hover img
	{
	-webkit-transform: scale(1.15);
	-ms-transform: scale(1.15);
	transform: scale(1.15);
	}
												
	.zdjportret:hover img
	{
	-webkit-transform: scale(1.15);
	-ms-transform: scale(1.15);
	transform: scale(1.15);
	}
	
	
	.formField{font: inherit; border: 1px solid #ccc; border-radius: 3px; margin: 3px 0 10px 0; padding: 3px 0; width: 99%;}
	
	
textarea.formField{width: 99%; height: 500px;}


#wyślij{cursor:pointer;background: #ccc; background: linear-gradient(#ddd 0, #eee 100%); border: 1px solid #ccc; line-height: 32px; font-size: 14px;padding: 0 25px; border-radius: 3px; margin-bottom: 10px; width: 50%;}




.status_ok{color: #060}


.status_err{color: #F00;
}

input[type="text"]::-webkit-input-placeholder {
  color: black;
  text-align: center;
  
  
}

textarea::placeholder {
  color: black;  
  text-align: center;
  
}

Zdaję sobie również sprawę z tego, że w tym cssie połowa jest niepotrzebna no ale cóż :D Jak coś to proszę o poprawki jeśli coś za dużo dałem. Pozdrawiam i dziękuję z góry

komentarz zamknięcia: Otrzymałem odpowiedź
komentarz 2 sierpnia 2018 przez Mariusz08 Maniak (62,300 p.)
Cześć! Przenieś swoje pytanie do kategorii Programowanie -> HTML/CSS. Pzdr

1 odpowiedź

+1 głos
odpowiedź 2 sierpnia 2018 przez shotokan Nałogowiec (39,660 p.)
wybrane 3 sierpnia 2018 przez pabloliquidar
 
Najlepsza

CSSa nie przeglądałem, ale brakuje Ci znacznika meta:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

 komentarz 2 sierpnia 2018 przez shotokan Nałogowiec (39,660 p.)
Przy okazji polecam zapoznać się z zagadnieniem media queries.

Podobne pytania

0 głosów
1 odpowiedź 310 wizyt
Ocena strony i problem z wersja mobilna.
pytanie zadane 26 października 2017 w Nasze projekty przez DragonCoder Nałogowiec (36,500 p.)
0 głosów
1 odpowiedź 352 wizyt
Wersja mobilna wyświetla się na PC i na odwrót
pytanie zadane 21 maja 2017 w HTML i CSS przez Wujek Greg Dyskutant (9,410 p.)
0 głosów
1 odpowiedź 190 wizyt
Wersja strony mobilna się krzaczy. Bootstrap 3.
pytanie zadane 8 lipca 2017 w HTML i CSS przez Erhart Początkujący (280 p.)

92,576 zapytań

141,426 odpowiedzi

319,652 komentarzy

61,961 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

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!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...