• 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

VPS Starter Arubacloud
0 głosów
249 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,280 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ź 324 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ź 368 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ź 232 wizyt
Wersja strony mobilna się krzaczy. Bootstrap 3.
pytanie zadane 8 lipca 2017 w HTML i CSS przez Erhart Początkujący (280 p.)

93,020 zapytań

141,983 odpowiedzi

321,283 komentarzy

62,366 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

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...