Problem z szablonem Showroom Yootheme pod urządzeniami mobilnymi

[sylwekb]

witam

Pisałem do supportu szablonu ale niestety bez odpowiedzi, otóż na stronie http://www.galeriapodmakiem.pl/
Trzymając pionowo tablet po wejściu do każdego artykułu pojawia się duża przestrzeń w wysokości całego ekranu
Artykuł jest pokazany poniżej.
Poza tym na urządzeniach mobilnych jest problem z wyświetlaniem tła oraz ornamentu z lewej i prawej strony:

W pliku szablonu odpowidają za to div-y w pliku
/templates/yoo_showroom/layouts/template.php
<div id="ornament-left"></div>
<div id="ornament-right"></div>

i w stylu
/templates/yoo_showroom/css/system-all.css



#ornament-left {
position: absolute;
top:0px;
left:-17%;
width:45px;
height:100%;
background: url('../images/background/bridge/ornament.png') repeat-y 0 0;
z-index:999;
}
#ornament-right {
position: absolute;
top:0px;
right:-6%;
width:45px;
height:100%;
background: url('../images/background/bridge/ornament_prawy.png') repeat-y 0 0;
z-index:999;
}



Może ktoś miał podobny problem.
W stylach wygląda wszystko w porządku.

Wygląda na to jakby szablon nie radził sobie na urządzeniach mobilnych mimo, że w opisie Yootheme jest to szablon także na wszystkie urządzenia mobilne.

[souacz]

Hm... Oryginalny szablon ze strony yootheme na wszystkich urządzeniach i we wszystkich układach (theme profiles) spisuje się ok.

Na Twojej adaptacji dzieją się dziwne rzeczy, na telefonie (GT-i9100 800/480 - 4.1.2) na wszystkich przeglądarkach jest w miarę ok zarówno w układzie pionowym i poziomym, nie widać tylko lewego ornamentu ale może tak ma być.

Na Asusie TF101G ( 4.0.3, 1280/800) początkowo nakładają się obrazki na frontowej (tak, jakby chciały "rozepchnąć kolumnę), za chilę efekt znika ale strona stale próbuje się odświeżyć, jakby jakieś js nie grały. Dzieje się tak tylko w pionie. Sprawdzałem na Android Browser i Opera Classic. Nie ma natomiast u mnie efektu opisanego przez Ciebie ("pojawia się duża przestrzeń w wysokości całego ekranu"). Gdyby nie to ciągłe odświeżanie - byłoby OK.

Chyba gdzieś Twój błąd przy edycji bo na oryginale wszystko gra. Kiedyś robiłem stronę na tym szablonie (niestety już nie istnieje bo właściciel nie przedłużył domeny) i mimo modyfikacji z mojej strony na mobilnych było ok.

Poniżej screeny Twojej strony.

Samsung:

http://gd.wirt08.biznes-host.pl/pliki/sa1.png

http://gd.wirt08.biznes-host.pl/pliki/sa2.png

http://gd.wirt08.biznes-host.pl/pliki/sa3.png

ASUS:

http://gd.wirt08.biznes-host.pl/pliki/as1.png

http://gd.wirt08.biznes-host.pl/pliki/as2.png

[sylwekb]

Wielkie dzięki za przetestowanie strony na urządzeniach mobilnych i odpowiedź.
Właśnie bardzo dziwna sprawa bo pasek ornamentu powinien być z jednej i z drugiej strony na pełnej wysokości strony także na urządzeniach mobilnych.
Jeszcze testowałem pod wersją Internet Explorer 8 i z lewej strony także nie widać ornamentu, nie wiem czym jest to spowodowane. Poza tym wszystko wyglada prawidłowo i pod żadną przeglądarką nie na urządzeniu mobilnym nic się nie przeładowuje.
Jeśli chodzi o treści to są zwykłe teksty i zdjęcia wstawiane do artykułu zgodnie ze wskazówkami Yootheme, galerie zdjęć wstawiane przez komponent Widgetkit dostarczany także przez Yootheme, zdjęcia ani żadne treści nie powinny się nakładać na siebie.
Nie powinno nic migać ani przeładowywać się w trakcie przeglądania strony. Są w szablonie jakieś biblioteki JS ale ich nie ruszałem.
Szkoda, że Support Yootheme nie chce się wypowiedzieć na ten temat.

[sylwekb]

Jeśli chodzi o ornament pod przeglądarkami Firefox i Google Chrome to wyświetla się zarówno z prawej jak i lewej strony.

[souacz]

To jest tak, że jak za dużo pozmieniasz w stylach itd to musisz dopasować potem albo w plikach php szablonów responsive albo w ich css. I często jeszcze w js bo one odpowiadają za renderowanie szablonu w różnych wersjach.

Na support bym nie liczył bo na ich oryginale wszystko jest OK.

[sylwekb]

Chciałem aby tylko podpowiedzieli w których plikach szablonu pozmieniać żeby było dobrze, gdzie szukać rozwiązania problemu. Z resztą powinienem sobie poradzić. W tych szablonach jest tak bardzo dużo plików, że trudno się w tym wszystkim połapać. W sumie dodałem tylko te ornamenty po bokach i tło z górami, żadnych plików js nie modyfikowałem.

[souacz]

To może nadaj tym ornamentom osobne klasy dla normalnej i responsive i ustaw w css-ach odpowiednio.
Ja już nie pamiętam jak ten szablon jest zbudowany, on ma osobne css dla resaponsive i normalnej wersji?

[sylwekb]

Tak, ma plik responsive w 2 katalogach css i warp/css
ale takie bardziej okrojone niż w pozostałych pełnych stylach więc pewnie gdzieś jeszcze to wszystko jest zagnieżdżone. Poniżej plik css/responsive.css


/* Breakpoints
----------------------------------------------------------------------------------------------------*/

/* All except large Screens */
@media (max-width: 1220px) {

}

/* Tablets and Phones */
@media (max-width: 1024px) {

#side-container {
width: 100% !important;
position: relative !important;
}

.sidebar-a-bottom-fixed {
width: 100% !important;
position: relative !important;
bottom: 0 !important;
}

}

/* Only Phones and Tablets (Portrait) */
@media (max-width: 959px) {

/* Modules */
.grid-h .mod-line:before { border-left: 0; }

#sidebar-b .grid-h:first-child .mod-line:before,
#sidebar-b .grid-v:first-child .mod-line:before { border-width: 1px 0 0 0; }

}

/* Only Tablets (Portrait) */
@media (min-width: 768px) and (max-width: 959px) {

/* Layout */
.sidebars-1 #sidebar-a .width100 { width: 100%; }

/* Menu */
.separator-side .menu-dropdown { margin-right: -21px; }
.separator-side #menu-follower { right: -29px; }

/* System */
.separator-side .searchbox .results { margin-left: 21px; }

}

/* Only Tablets (Portrait) and Phones (Landscape) */
@media (min-width: 480px) and (max-width: 959px) {

/* Layout */
.sidebars-2 #sidebar-a,
.sidebars-2 #sidebar-b { width: 100%; }

.sidebars-1 #sidebar-b .width100,
.sidebars-2 #sidebar-b .width100 { width: 50%; }

/* Modules */
.grid-h:nth-child(n+3) > .mod-line { padding-top: 20px; }

.grid-h:nth-child(n+3) > .mod-line:before {
top: 0;
bottom: auto;
left: 0;
right: 0;
border-width: 1px 0 0 0;
}

.grid-h:nth-child(n+3) > .mod-line .badge { top: 15px; }

}

/* Only Phones */
@media (max-width: 767px) {

/* Layout */
#logo,
#search,
#toolbar,
#headerbar,
#menu,
#breadcrumbs { display: none; }

#block-side,
#block-main { width: 100%; }

#header { margin-top: 0; }

#sidebar-a .grid-v:last-child .mod-line:before { border-width: 0; }

.sidebar-a-bottom-fixed { display: none; }

.separator-side #block-side { border-width: 0 0 1px 0; }

}

/* Only Phones (Landscape) */
@media (min-width: 480px) and (max-width: 767px) {

.sidebars-2 #sidebar-a .width100 { width: 50%; }

}

/* Only Phones (Portrait) */
@media (max-width: 479px) {

/* Modules */
.grid-h .mod-line,
.grid-v:first-child .mod-line { padding-top: 20px; }

.grid-h .mod-line:before {
top: 0;
left: 0;
right: 0;
bottom: auto;
border-width: 1px 0 0 0;
}

.mod-line .badge { top: 15px; }

/* System */
#system .items .item,
#system .items .item:first-child {
margin-top: 12px;
padding-top: 18px;
border-top-width: 1px;
}

#system .items :first-child .item:first-child {
margin-top: 0;
padding-top: 0;
border-width: 0;
}

#system .items .leading .item {
margin-bottom: 0;
padding-bottom: 0;
border-width: 0;
}

/* Featured Image */
#system .items > .width50 .featured-image,
#system .items > .width50 + .width50 .featured-image { margin: 0 -20px 20px -20px; }

}

[souacz]

No to dopisz klasy dla ornamentów w głównym css, w responsive daj je display:none i dopisz osobne (w responsive), ustawiając wyświetlanie tak, jak Ci pasuje. Może będziesz musiał trochę szerokościami bloków pomajstrować żeby było dobrze dla 480 px i np. 1024.
EDIT: widzę, że masz klasy ornament -right i ornament-left w głównym, ustaw tylko żeby się nie wyświetlały w responsive i tam dopisz osobne