Максим Тимофеев

Вот так это работает:
запрос на сервер -> сервер обрабатывает запрос (тут ваш foreach) -> ответ браузеру в виде html (вот тут можно средствами css получить размер браузера)
А Вы спрашиваете как вернуться во времени назад? Никак.
У Вас подход не правильный. Вам надо код кастомизировать не на сервере, а в браузере. Либо, как корявый вариант, создать 2 отображения, 1 сделать display:none; потом в браузере в зависимости от размера экрана менять видимость блоков.
Можно на сервере в настройках сервера определять например мобильный девавйс и делать редирект на мобильный поддомен, потом настроить маршрутизацию и два различных шаблона скармливать. Но учитывая Ваш вопрос - даже не пытайтесь. Для начала надо понять как работают сайты.

Если просто, то цепляться за $_SERVER, вытаскивать от туда домен. При этом иметь один код, который кастомизирован. Не совсем наверное правильно так делать. Но если посещения там не зашкаливают - можно психануть.

1. Верстается на html+css+jquery.
2. Bootstrap - технология ускоряющая и упрощающая 1-е. Но можно обойтись без нее или использовать аналоги, а их не мало.
3. При этом не важно opencart или что-то еще. В случае с версткой под движок надо маломальски знать его архитектуру. В случае с OpenCart иметь хотя бы общее понимание что такое php. Иногда в шаблонах применяются шаблонизаторы twig или smarty тогда их тоже надо знать.

В любом случае начните с изучения html+css+jquery. Два сайта, которые надо почитать и потом использовать как справочники:
www.w3schools.com
htmlbook.ru

Каждый писака вакансий понимает свое. Еще часто встречаю "Знание api" - что тоже расплывчато. Это как знание ПК.
Думаю проще уточнять на каком уровне стоит знать то или иное. Думаю подобные уточняющие вопросы только в плюс.

Если надо только стрелки и 4 штуки, то переворачивать - вариант. Если иконок много - то подключите fontawesome.io/icons и не пытайтесь экономить байты, в то время, когда точно можно сэкономить МБ (уверен что есть где, всегда есть).

У li в списке основных категорий родителю задать position:relative;
В нем блок с подкатегориями. Он hidden и position:absolute;
li:hover>div {display:block; right:0; top:0;}
Все.
Зачем искать когда это быстро пишется. Поэтому и не находите, так как никто не выкладывает решения из трех строчек.
Код aliExpressa даже смотреть не надо, там точно принцип такой.

Попробуйте убрать излишнюю вложенность, оттестируйте на чем-то простом. Черный блок, белый блок и все. Потом постепенно усложняйте структуру. Так отловите место вызывающее дрожание.

Миллион, но будет тормозить очень.

Сторонние шрифты могут весить совсем разные порядки килобайт. Поэтому тут нет важно кол-во шрифтов, а важно насколько они тяжелые и как быстро отрисовываются в браузере. Зайдите для примера в https://www.google.com/fonts. Там для каждого шрифта есть скорость загрузки.

А нельзя вместо 100px использовать %, раз уж контейнер в %.
Но можно задать несколько background

background-color:#fff,#ff3,#ddd;
 background-position:0 0, 100px 0, 200px 0;

только не 3 прописать, а 29 или сколько там надо Вам. Или вместо background-color, background-image
Можно сделать и в js. Вычислить ширину родителя, разбить на куски по 100px и т.д.

А не проще это сделать еще на сервере, когда Вы их генерируете?
А вообще вот:
http://jquery.page2page.ru/index.php5/Число_элемен...
Поиск принципе очень полезная штука, рекомендую.

А чем это не годится? https://ru.bem.info/method/

сделать на сервере симлинк, кто бы по запросу /img/ выводилась эта папка и все. Но правильный вариант хранить публичный контент в публичной папке, в чем с этим проблема?

ЕСли с z-index все ок, видимо у выпадающего списка нет бэкграунда и кнопка сквозь него просвечивается. Сделайте background: #fff;

поиск. Всегда помогает: https://yandex.ru/search/?text=bootstrap%20tamplat...