Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]szerokość strony na telefonie
Forum PHP.pl > Forum > Przedszkole
ABDOO
22.06.2014, 05:40:22
Witam,
mam problem z szerokością strony podczas wyświtelania na telefonie. Do arkusza stylów dodałam @media i za pomocą tego zmieniłam część dla rozdzielczości mniejszych niż 1024px, 680px i 320px. Na chwilę obecną jak zmniejszę okno przeglądarki do 320px strona nie wyświwtla się w całości. Ucięte jest jakieś 20% z prawej strony. Próbowałam zmieniać max-witdh, min-width i width na różne sposoby, ale bez żadnego efektu w przeglądarce...
Może ktoś rzuci okiem
[HTML] pobierz, plaintext 
  1. html, body {
  2. 	background: rgba(179,220,237,1);
  3. /* Old Browsers */background: -moz-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 0%, rgba(188,224,238,1) 100%);
  4.  /* FF3.6+ */background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(179,220,237,1)), color-stop(0%, rgba(41,184,229,1)), color-stop(100%, rgba(188,224,238,1)));
  5. /* Chrome,Safari4+  */background: -webkit-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 0%, rgba(188,224,238,1) 100%);
  6.  /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 0%, rgba(188,224,238,1) 100%);
  7.  /* Opera 11.10+ */background: -ms-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 0%, rgba(188,224,238,1) 100%);
  8.  /* IE 10+ */background: linear-gradient(to bottom, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 0%, rgba(188,224,238,1) 100%);
  9. /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=0 );
  10. /* IE6-9 */
  11. background-attachment: fixed;
  12. margin:0;
  13. 	padding: 0;
  14. 	min-height: 100%;
  15. 	position: relative;
  16. 	font-size: 1em;
  17. 	font-size: 14px;
  18. 	line-height:15px;
  19. width:100%;
  20. 	color: #003781;
  21. 	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif
  22.  
  23. 	}
  24.  
  25. h1{
  26. 	font-size: 1.857em;
  27. 	padding: 2% 0%;
  28. 	line-height: 1.95em
  29. }	
  30.  
  31. h2 {
  32. 	font-size: 1.429em;
  33. 	padding: 1%;
  34. 	line-height: 1.5em
  35. }
  36.  
  37. h3 {
  38. 	font-size:1em;
  39. 	line-height: 1em
  40. }
  41.  
  42. img {
  43. 	padding: 0;
  44. 	margin: 0;
  45. }
  46.  
  47. *{
  48.     padding: 0;
  49.     margin: 0;
  50. }
  51.  
  52. a {
  53. 	text-decoration: none;
  54. 	color: #003781;
  55. 	outline: 0;
  56. }
  57.  
  58. #skrollr-body {
  59. 	height:4200px;
  60. 	width:100%;
  61. 	margin:0;
  62. 	padding:0;
  63. 	clear:both;
  64. 	background: rgba(179,220,237,1);
  65. /* Old Browsers */background: -moz-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 0%, rgba(188,224,238,1) 100%);
  66.  /* FF3.6+ */background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(179,220,237,1)), color-stop(0%, rgba(41,184,229,1)), color-stop(100%, rgba(188,224,238,1)));
  67. /* Chrome,Safari4+  */background: -webkit-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 0%, rgba(188,224,238,1) 100%);
  68.  /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 0%, rgba(188,224,238,1) 100%);
  69.  /* Opera 11.10+ */background: -ms-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 0%, rgba(188,224,238,1) 100%);
  70.  /* IE 10+ */background: linear-gradient(to bottom, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 0%, rgba(188,224,238,1) 100%);
  71. /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=0 );
  72. /* IE6-9 */
  73. }
  74.  
  75.  
  76. /*---------------------*/
  77. /*--------SCREEN-------*/
  78. /*---------------------*/
  79.  
  80.  
  81. .screen {
  82. 		background-size: cover;
  83. 		background-position: 50% 50%;
  84.  
  85.  
  86.  
  87. }
  88.  
  89. /*---------------------*/
  90. /*--------SIDEBAR------*/
  91. /*---------------------*/
  92.  
  93.  
  94. nav {
  95. 	width:100%;
  96. 	overflow:hidden;	
  97.  
  98. }
  99.  
  100. ul li{
  101. list-style-type: circle;
  102. padding:5px;
  103. margin:2px;
  104.  display: list-item;
  105. }
  106.  
  107. nav a {
  108. 	padding: 5px 0px;
  109.  
  110.  
  111. }
  112.  
  113. nav a:hover {
  114. }
  115.  
  116. header {
  117. 	position: fixed;
  118. 	top: 20%;
  119. 	right: 0%;
  120. 	width: 210px;
  121. 	z-index: 200;
  122. 	max-width:15%
  123. }
  124.  
  125. #logo {
  126. 	float:left;
  127. 	z-index: 300;
  128. 	width:210px;
  129. 	max-width:100%
  130.  
  131. }
  132.  
  133. #logo img {
  134. 	width:100%
  135. }
  136.  
  137. #mainnav ul li{
  138. 	list-style: none;
  139. 	padding:0;
  140. 	margin:0;
  141.  
  142. }
  143.  
  144. #mainnav ul li a {
  145. 		display:block;
  146. 		font-size:1.214em;
  147. 		-moz-transition:  font-size .1s linear;  
  148. 	    -webkit-transition: font-size .1s linear;  
  149. 	    -ms-transition:  font-size .1s linear;  
  150. 	    -o-transition:  font-size .1s linear;  
  151. 	    transition:  font-size .1s linear;
  152. 	    line-height: 1.225em;
  153. 	    text-align:center
  154.  
  155.  
  156. }
  157.  
  158. #mainnav ul li a:hover,
  159. #mainnav ul li a:active {
  160. 		font-size: 1.286em;
  161. 		color:#fff
  162.  
  163. }
  164.  
  165.  
  166.  
  167. /*---------------------*/
  168. /*--------BLURS--------*/
  169. /*---------------------*/
  170.  
  171.  
  172. .blur {
  173. 	width:300px;
  174. 	height:200px;
  175. 	max-width: 25%; 
  176. 	max-height:25%; 
  177.  
  178. }
  179.  
  180. /*---------------------*/
  181. /*--------EXTRAS-------*/
  182. /*---------------------*/
  183.  
  184.  
  185.  
  186.  
  187. .extras {
  188. 	width:10%;
  189. 	height:10%;
  190. 	max-width: 25%; 
  191. 	max-height:25%; 
  192. 	padding: 5% 5% 5% 5%;
  193. 	position: absolute;
  194. 	color: #003781;
  195. 	display:block;
  196. 	text-align: center;
  197. 	vertical-align: top;
  198.  
  199. }
  200.  
  201.  
  202. div.text {
  203. 	display:none;
  204.  
  205. }
  206.  
  207. .inline {
  208. 	background-image: url("../img/ribbon5.png");
  209. 	background-size: 100%;
  210. 	background-repeat: no-repeat;
  211. 	padding: 2% 2%;
  212. 	margin: 0px 0px;
  213. 	width: 30%;
  214. 	height:6%;
  215. 	display:block;
  216. 	color:#fd6c1d;
  217. 	text-align: left;
  218. 	position:absolute;
  219. 	left: 80%;
  220. 	top:40%;
  221. 	text-transform: uppercase;
  222. 	font-size: 0.8em
  223. }
  224.  
  225. #maincloud {
  226. 	position: fixed;
  227. 	top:50%;
  228. 	left:50%;
  229. 	margin-left:-35%;
  230. 	margin-top:-15%;
  231. 	max-width: 70%;
  232. 	width:900px;
  233. 	height:450px;
  234. 	z-index:100;
  235.  
  236. }
  237.  
  238.  
  239. .maincloud {
  240. 	width: 60%;
  241. 	height: 66%;
  242. 	padding: 17% 20% 17% 20%;
  243. 	transition: transform 5s;
  244. 	-webkit-transition: transform 5s;
  245. 	-moz-transition: transform 5s;
  246. 	-o-transition: transform 5s;
  247. 	-ms-transition: transform 5s;
  248. 	position:absolute;
  249. 	left:0px;
  250.  
  251. }
  252.  
  253. .maincloud h1 {
  254. 	position:absolute;
  255. 	top:0;
  256. 	left:0;
  257. 	text-align:center;
  258. 	width: 80%;
  259. 	padding: 5% 10% 0% 10%;
  260. 	height: auto;
  261. }
  262.  
  263.  
  264. #family {
  265. 	background: url("../img/family.png");
  266. 	background-repeat: no-repeat;
  267. 	background-size:contain;
  268.  
  269.  
  270. }
  271.  
  272.  
  273.  
  274. #car {
  275. 	background: url("../img/car.png");
  276. 	background-repeat: no-repeat;
  277. 	background-size:contain;
  278.  
  279. }
  280.  
  281.  
  282. #company{
  283. 	background: url("../img/company.png");
  284. 	background-repeat: no-repeat;
  285. 	background-size:contain;
  286.  
  287. }
  288.  
  289.  
  290. #vip {
  291. 	background: url("../img/clients.png");
  292. 	background-repeat: no-repeat;
  293. 	background-size:contain;
  294. }
  295.  
  296.  
  297.  
  298. #contact {
  299. 	background: url("../img/main.png");
  300. 	background-repeat: no-repeat;
  301. 	background-size:contain;
  302. }
  303.  
  304. #contact img {
  305. 	max-width:5%
  306. }
  307.  
  308.  
  309. #people {
  310. 	padding: 0 0%;
  311. 	margin:0;
  312. 	position: absolute;
  313. 	bottom:0px;
  314. 	z-index: 99999;
  315. 	min-height:300px;
  316. 	width:100%;
  317. 	background-image: url("../img/city.png");
  318. 	background-size: cover;
  319. 	background-position: bottom center
  320. }
  321.  
  322. #footer{
  323. 	clear: both;
  324. 	background: #367935;
  325. 	width:80%;
  326. 	padding:1% 10%;
  327. 	margin:0%;
  328. 	position:relative;
  329. 	height: auto;
  330. 	overflow:hidden;
  331. 	z-index:9999
  332. }
  333.  
  334. #map{
  335. 	width: 1000px;
  336. 	height: 400px;
  337. 	margin: 0 auto;
  338. 	-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  339. -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  340. box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  341.  
  342.  
  343.  
  344. }
  345.  
  346.  
  347.  
  348. #facebook {
  349. 	position:fixed;
  350. 	bottom: 10%; left:1%;
  351. 	z-index: 999999;
  352. 	animation: 5s fb infinite ease;
  353. 	-webkit-animation: 5s fb infinite ease;
  354. 	max-height: 10%;
  355. 	max-width:10%
  356. }
  357.  
  358. #facebook img {
  359. 	width:100%;
  360. 	height:100%
  361. }
  362.  
  363. @keyframes fb {
  364. 	0% {transform: translateY(0px); }
  365. 	50% {transform: translateY(15px); }
  366. 	100% {transform:translateY(0px); }
  367. }
  368.  
  369. @-webkit-keyframes fb {
  370. 	0% { -webkit-transform: translateY(0px); }
  371. 	50% { -webkit-transform: translateY(15px);}
  372. 	100% { -webkit-transform: translateY(0px); }
  373. }
  374.  
  375. @media all and (max-width: 1024px) {
  376.  
  377. 	body, html {
  378. 		font-size: 12px;
  379. 		width:100%;
  380. 	}
  381.  
  382. #skrollr-body {
  383.  
  384.  
  385. }
  386.  
  387. .extras {
  388. 	width:15%;
  389. 	height:15%;
  390. 	max-width: 15%; 
  391. 	max-height:15%; 
  392. 	padding: 6% 5% 5% 5%;
  393. 	position: absolute;
  394. 	color: #003781;
  395. 	display:block;
  396. 	text-align: center;
  397. 	vertical-align: bottom;
  398.  
  399. }
  400.  
  401.  
  402. div.text {
  403. 	display:none;
  404.  
  405. }
  406.  
  407. .inline {
  408. 	background-image: url("../img/ribbon5.png");
  409. 	background-size: 100%;
  410. 	background-repeat: no-repeat;
  411. 	padding: 3px ;
  412. 	margin: 0px; 
  413. 	width: 65px;
  414. 	height:14px;
  415. 	display:block;
  416. 	color:#fd6c1d;
  417. 	text-align: left;
  418. 	position:absolute;
  419. 	left: 80%;
  420. 	top:30%;
  421. 	text-transform: uppercase;
  422. 	font-size: 0.8em
  423. }
  424.  
  425.  
  426. .blur {
  427. 	width:20%;
  428. 	height:20%;
  429. 	max-width: 200px; 
  430. 	max-height:150px; 
  431.  
  432. }
  433.  
  434.  
  435.  
  436. }
  437.  
  438.  
  439.  
  440.  
  441.  
  442. @media all and (max-width: 680px) {
  443.  
  444. 	body, html {
  445. 		font-size: 10px;
  446. 		width:100%;
  447. 	}
  448.  
  449.  
  450.  
  451. .extras {
  452. 	min-width:150px;
  453. 	min-height:50px;
  454. 	width: 33%; 
  455. 	height:5%;
  456. 	padding: 7% 1.5% 3% 1.5%;
  457. 	position: absolute;
  458. 	color: #003781;
  459. 	display:block;
  460. 	text-align: center;
  461. 	vertical-align: bottom;
  462.  
  463. }
  464.  
  465.  
  466.  
  467. .inline {
  468. 	padding: 1px 3px;
  469. 	margin: 0px 0px;
  470. 	width: 45px;
  471. 	height:12px;
  472. 	top:50%}
  473.  
  474.  
  475.  
  476. }
  477.  
  478. @media all and (max-width: 420px) {
  479.  
  480. 	body, html {
  481. 		font-size: 8px;
  482. 		width:100%;
  483.  
  484.  
  485. 	}
  486.  
  487.  
  488.  
  489. .extras {
  490. 	min-width:100px;
  491. 	min-height:30px;
  492. 	width: 33%; 
  493. 	height:5%;
  494. 	padding: 7% 1.5% 3% 1.5%;
  495. 	position: absolute;
  496. 	color: #003781;
  497. 	display:block;
  498. 	text-align: center;
  499. 	vertical-align: bottom;
  500.  
  501. }
  502.  
  503.  
  504.  
  505. .inline {
  506.  
  507. 	display:block;
  508. 	color:#fd6c1d;
  509. 	text-align: left;
  510. 	text-transform: uppercase;
  511. 	font-size: 0.9em;
  512. position:absolute;
  513. left:90%;
  514. top:55%}
  515.  
  516.  
  517. }
[HTML] pobierz, plaintext
ber32
22.06.2014, 11:36:49
Zamień 
[HTML] pobierz, plaintext 
  1. @media all and (max-width: 420px) {
[HTML] pobierz, plaintext

na 
[HTML] pobierz, plaintext 
  1. @media all and (max-width: 320px) {
[HTML] pobierz, plaintext
ABDOO
23.06.2014, 09:08:22
zmienilam na 320px ale wciąż wygląda na to, że w ogóle tych styli dla max 320px nie czyta tylko od 0 do 680px korzysta z max 680px O_o
trueblue
23.06.2014, 09:27:54
Jaką masz kolejność @media w zależności od rozdzielczości?
ber32
23.06.2014, 14:00:51
Cytat
zmienilam na 320px ale wciąż wygląda na to, że w ogóle tych styli dla max 320px nie czyta tylko od 0 do 680px korzysta z max 680px O_o

z kąd taki wniosek.

Wstaw to
[HTML] pobierz, plaintext 
  1. @media all and (max-width: 320px) {
  2.  
  3. body, html {
  4. font-size: 8px;
  5. width:100%;
  6.  
  7.  
  8. }
  9.  
  10.  
  11.  
  12. .extras {
  13. min-width:100px;
  14. min-height:30px;
  15. padding: 7% 1.5% 3% 1.5%;
  16. position: absolute;
  17. color: #003781;
  18. display:block;
  19. text-align: center;
  20. vertical-align: bottom;
  21.  
  22. }
  23.  
  24.  
  25.  
  26. .inline {
  27.  
  28. display:block;
  29. color:#fd6c1d;
  30. text-align: left;
  31. text-transform: uppercase;
  32. font-size: 0.9em;
  33. position:absolute;
  34. top:55%}
  35.  
  36.  
  37. }
[HTML] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.