problem z wersją renponsywną

euphoria-art

2015-02-23 16:19

Hej, Tworzę nową skórkę, w wersji na komputer jest ok, a na tel wygląda jak na zdjęciu http://www.fotosik.pl/pokaz_obrazek/pelny/8d5242af282a745e.html sopka nie jest po całej szerokości strony, wyczerpałem już wszystkie możliwe kombinacje,
strona testowa ze skórką - http://obrazyolejne.cba.pl/
dostęp do style.css - http://obrazyolejne.cba.pl//templates/default/style.css
bardzo proszę o pomoc,

» Quick.Cms v6.x

Jupraw

2015-02-23 16:44

Zacznijmy od tego, że Twoja strona, o ile jest mowa o http://obrazyolejne.cba.pl/ nie jest responsywna. Proponuję Tobie sprawdzić na http://www.responsinator.com/ gdzie jest ona przedstawiona na różnych urządzeniach.
Nie jestem wielkim fachowcem, ale moje wszystkie strony tworzę responsywne i nie mam z tym kłopotów.
Zacznijmy od tego, że w pliku header.php wstaw jednak w sekcji head wiersz:
<meta name="viewport" content="width=device-width, initial-scale=1" />

W stylach proponuję dodać rozdzielczości różnych urządzeń mobilnych i dla nich dopasować wg potrzeb style, dla przykładu na jednej z moich stron (dodane jest nemu dodatkowe z lewej strony), wygląda to w ten sposób:
/* RESPONSIVE WEB DESIGN - media queries */
@media screen and (max-width:1199px){
#container{width:98%;}
}
@media screen and (max-width:768px){
#column{width:28%;}
#page{width:68%;}
}
@media screen and (max-width:600px){
#column{width:35%;}
#page{width:61%;}
.images-1 p, .images-2 p, .images-3 p, .images-4 p{font-size:0.6em;}
#quick-box .navigation{font-size:0.75em;margin-bottom:-10px;}
#quick-box .description{font-size:0.5em;}
}
@media screen and (max-width:479px){
#column{float:left;width:100%;}
.box, .menu-2, .menu-3, .menu-4, .menu-5, .menu-6, .menu-7, .menu-8, .menu-9{float:left;width:98%;}
#container{width:100%;}
#container{width:100%;}
#content{clear:left;margin: 0 1%;}
#page{width:98%;}
#page div.content{margin-left:5%;}
.images-1 p, .images-2 p, .images-3 p, .images-4 p{font-size:0.5em;}
#quick-box .navigation{font-size:0.6em;}
#quick-box .description{font-size:0.45em;}
.menu-1 li{float:left;width:100%;}
.menu-1 li a{width:100%;}
.menu-1 li a:hover, .menu-1 li.selected a, .menu-1 li:first-child a:hover, .menu-1 li.selected:first-child a{width:100%;}
}

Jupraw

euphoria-art

2015-02-23 17:04

Jupraw po dodaniu tego meta ze stopki zrobił się mały prostokącik, przyznam Ci ise ze walczę już z tą stopką trzeci dzień

euphoria-art

2015-02-23 17:07

priorytetem jest stopka później będzie renponsywność

Jupraw

2015-02-23 17:25

Nie wiem na czym sprawdzasz i jak, ale teraz stopka jest taka jak to jest ustalone. Zobacz, że trochę namieszałeś. Na początku pliku style.css masz ustawioną szerokość #container na width:100% (w oryginale jest 1200px i tak zostawiłbym, tym bardziej, że i #header masz na 1200px. Nie wiem też po co ustawiłeś dla #body wartość width:1200px i tak samo dla #foot .container. Usuń to. One dziedziczą z containera.
To tak pobieżnie. Jeżeli to zrobisz będziesz miał w responsywności zawsze 95% ponieważ tak jest ustalone w:
@media screen and (max-width:1199px) {
#container {
width : 95%;
}
Proponuję spojrzeć to w Firefix/Narzędzia/Dla twórców witryn/Widok responsywny

Jupraw

euphoria-art

2015-02-23 17:33

po usunięciu i zmianach wróciło mi do pierwowzoru, a chciałem tło stopki, body, i menu po całej szerokości a wszystko żeby było wyśrodkowane 1200px, teraz jestem na samym początku.

euphoria-art

2015-02-23 17:37

to wszystko musiałem mieć tak poustawiane, np z #header jak usunałem 1200px to rozjeżdżało mi się na boki top menu

Jupraw

2015-02-23 17:40

.menu-1{float:right;} ma tak wyglądać, a ty znów masz sztywne 1200px - wywal. Muszę Tobie zwrócić uwagę, że ze swoim banerem nie uzyskasz responsywności. Jak podejrzewam pozbyłeś się slidera na korzyść swego banera. Jeżeli dobrze Ciebie zrozumiałem, to spójrz na www.11pcz.pl i zobacz jak zachowują się poszczególne elementy strony, włącznie z banerem. Czy o to Tobie chodzi?

Jupraw

euphoria-art

2015-02-23 17:48

Całość ładnie sie układa baner się zmniejsza itp, takie efekt chce uzyskać ale później, teraz chce poprawić footer, Jupraw zobacz jak wygląda teraz moja strona kolory boody menu i footera są po całej szerokości, a tekst i opisy 1200px. Jak zrobić to prawidłowo żeby uzyskać taki efekt - przywróciłem stronę tak jak było - http://obrazyolejne.cba.pl/

euphoria-art

2015-02-23 17:51

jak możesz to odezwij się na slawek5562@wp.pl nie chce tu na forum pisac

Jupraw

2015-02-23 18:17

Jesteś na dobrej drodze.

Jupraw

euphoria-art

2015-02-23 18:23

odezwij się na pocztę mam dla ciebie propozycje

Jupraw

2015-02-23 18:25

Wysłałem po raz drugi.