Для правильного вопроса надо знать половину ответа
А с чего оно должно выводиться на другом устройстве или даже просто в другом браузере?
Хотите, чтобы что-то было доступно глобально - делайте бэкенд, к которому будут обращаться клиенты, и храните глобальную информацию там.
Для правильного вопроса надо знать половину ответа
Это песочница. Она добавляет скрипты после вашего HTML-кода. В результате последним элементом становится не p, а script и селектор p:nth-last-child(1) ничему не соответствует.
Для правильного вопроса надо знать половину ответа
Как думаете, куда деваются пробелы и переводы строк, которые у вас находятся между тэгами img? Они, хоть и сокращаются до одного пробела, но не исчезают полностью.
Вариантов решения несколько:
- можно задать родительскому элементу нулевой размер шрифта;
- можно записать тэги без промежутков;
- можно поставить комментарии между тэгами:
Для правильного вопроса надо знать половину ответа
Похоже, что у вас где-то задана фиксированная высота для внешнего div'а. При этом высота ячеек сетки стала больше высоты картинок. Отсюда и пустые места.
Для правильного вопроса надо знать половину ответа
Это разные по сути объявления. content: ""; - задаёт содержимое псевдоэлемента (пустую строку) content: none; - говорит, что псевдоэлемент вообще не генерируется