Krakozavr
Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Простите за кросс-пост, поскольку проблема локализовалась до чистого CSS, возвращаю вопрос в основную ветку по CSS. Начало обсуждения тут: ТЫК!
C помощью глубокоуважаемого Mavrikii, да будуь благословенны следы его подошв  - почти решил ребус с настройкой хитрого блока под разрешение экрана.
Но небольшой ooops имеется.
Сайт http://alex-potemkin.squarespace.com - пока на триале, надо нажать кнопу и ввести предложенный код, простите за неудобства. Конструктор SquareSpace не дает доступа к исходному коду, но позволяет внедрять кастомный CSS и скрипты.
На сайте две раскладки: десктопная и мобильная.
Десктопная раскладка обрабатывается как часы.
А мобильная, при вроде бы такой же структуре CSS, не обрабатывается при загрузке. При перерасчете размера окна - все работает. Например, на планшете - загрузил в ландшафте (благодаря размеру, грузится корректно работающая десктопная раскладка, не мобильная), перевернул в портрет - раскладка меняется на мобильную и всё рассчитывается как прописано; или на десктопе при масштабировании окна - при сужении до заданных размеров происходит смена раскладки на мобильную с корректным перерасчетом блоков. Но на том же планшете при загрузке в портрете - загружается мобильная раскладка, но разметка блоков игнорируется. Если при этом перевернуть в ландшафт - перерассчитает на обычную раскладку, потом вернуть в портрет - вернет мобильную, но уже с корректным расчетом блоков. На телефоне еще хуже: поскольку, из-за размеров экрана, грузится только мобильная раскладка - корректного рассчета блоков не происходит никогда, как его ни крути.
Чего ему не хватает?
Вот два фрагмента кода, для десктопа и мобилы (ьлоков под разные размеры там много, но они типовые):
десктоп:
Код:
@media only screen and (max-height:1200px){.collection-type-gallery #slideshow{height:800px}.collection-type-gallery #slideshow .slide,.collection-type-gallery #slideshow .slide img{height: 800px;}#headerWrapper nav, #headerWrapper nav a, #mobileNav nav a, #mobileNav nav label {font-size: 14pt;}.site-title .logo {font-size: 40pt;}.logo-subtitle {font-size: 10pt;} #header, {padding-top: 10pt; padding-right: 60px; padding-bottom: 10pt; padding-left: 90px; }
/*галерея-описание */
.collection-type-gallery #slideshow .slide div.image-description {background: white; opacity: 100; margin-left: 65px; padding-top: 0px; /* border-top: 1px solid black;*/ top: 0px;}
.collection-type-gallery #slideshow .slide div.image-description strong {font-size: 40pt; color: #bbbbbb; font-weight: normal; opacity: 100; }
.collection-type-gallery #slideshow .slide div.image-description p {font-size: 16pt; color: black; opacity: 100; padding-top:10px; padding-bottom: 0px; margin-bottom: 0px;}
#header, #footer {padding-top: 10pt; padding-right: 60px; padding-bottom: 5pt; padding-left: 85px; }
.sqs-footer-injection {padding-left: 85px;}
div[data-slide-url="gallery-description"] img {width: 500px;}
}
|
мобила:
Код:
@media only screen and (max-width:800px){#slideshowWrapper.mobile-gallery #slideshow .slide .image-description {position: absolute; margin-top: 10px;}
#slideshowWrapper.mobile-gallery div#slideshow.sqs-gallery-design-strip div.sqs-wrapper div.slide[data-slide-url="gallery-description"] img {height: 300px !important;}
/*галерея-описание */
.collection-type-gallery #slideshow .slide div.image-description {background: white; opacity: 100; margin-left: 35px; padding-right: 30px; padding-top: 0px; /* border-top: 1px solid black;*/ top: 0px;}
.collection-type-gallery #slideshow .slide div.image-description strong {font-size: 28pt; color: #bbbbbb; font-weight: normal; opacity: 100; }
.collection-type-gallery #slideshow .slide div.image-description p {font-size: 13pt; color: black; opacity: 100; padding-top:10px; padding-bottom: 0px; margin-bottom: 0px;}
#header, #footer {padding-top: 10pt; padding-right: 40px; padding-bottom: 5pt; padding-left: 85px; }
.sqs-footer-injection {padding-left: 63px;}
}
|
Добавлено:
коллеги, и еще дурной вопрос - чтоб два раза не вставать
есть вот такая страница: http://pixels.com/widgetshoppingcart/artwork.html?memberidtype=artistid&memberid=223022&domainid=0&showheader=0&height=600&autoheight=true
вверху имеем переключатели меню: самый правый - Galleries. Если его нажать, разворачивается скрытый DIV.
А можно ли прилепить какой код свержу, чтобы страница грузилась сразу с открытыми галереями? Грузиться будет в iFrame, т.е. на материнскую страницу можно прилепить любой кастом CSS, но у меня вообще никаких идей как оно тут работает |
Всего записей: 322 | Зарегистр. 02-02-2003 | Отправлено: 05:29 13-04-2016 | Исправлено: Krakozavr, 05:31 13-04-2016 |
|
