Responsive CSS на мобильном устройстве: не срабатывает при загрузке.
 

Был у меня вопрос по форматированию картинки под разные разрешения. На всякий случай, начало обсуждения тут: ТЫК!

Проблема решилась через чистый CSS.
Но небольшой ooops имеется.

Сайт http://alex-potemkin.squarespace.com - пока на триале, надо нажать кнопу и ввести предложенный код, простите за неудобства. Конструктор SquareSpace не дает доступа к исходному коду, но позволяет внедрять кастомный CSS и скрипты.

На сайте две раскладки: десктопная и мобильная.

Десктопная раскладка обрабатывается как часы.

А мобильная, при вроде бы такой же структуре CSS, не обрабатывается при загрузке. При перерасчете размера окна - все работает. Например, на планшете - загрузил в ландшафте (благодаря размеру, грузится корректно работающая десктопная раскладка, не мобильная), перевернул в портрет - раскладка меняется на мобильную и всё рассчитывается как прописано; или на десктопе при масштабировании окна - при сужении до заданных размеров происходит смена раскладки на мобильную с корректным перерасчетом блоков. Если на десктопе перегрузить узкое окно "телефонных" размеров, то загрузится мобильная раскладка без перерасчета. Но если после этого изменить размеры окна до десктопного, а потом вернут к телефонному - то всё перерассчитается. Но на том же планшете при загрузке в портрете - загружается мобильная раскладка, но разметка блоков игнорируется. Если при этом перевернуть в ландшафт - перерассчитает на обычную раскладку, потом вернуть в портрет - вернет мобильную, но уже с корректным расчетом блоков. На телефоне еще хуже: поскольку, из-за размеров экрана, грузится только мобильная раскладка - корректного рассчета блоков не происходит никогда, как его ни крути.

Чего ему не хватает?

Масштабироваться дожна КАРТИНКА, описываемая в коде как div.slide[data-slide-url="gallery-description"] img {...} (так много обвеса - чтобы победить приоритет оригинального кода), на десктопе проще - собственно минимально-достаточный уникальный идентификатор элемента div[data-slide-url="gallery-description"] img {...}

Вот два фрагмента кода, для десктопа и мобилы (блоков под разные размеры там много, но они типовые):

десктоп:

@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;}
  
}

что упущено?

!!!!
разобрался.
В погоне за увеличением веса идентификаторов набрал их слишком много. Упростил конструкцию описания до необходимого минимума - заработало как надо. Не очень понял, почему не работало в том виде как было записано - описание соверенно корректное, ну и хрен с ним.

Удалил бы тему, но не нашел, как :)