Dmitry

Потому что на смартфоне не может быть чисто логически события mouseover. Тут только ставить обработчик события click на какой-нибудь элемент. Есть еще события касания, с помощью которых можно имплементировать свайп (но в вашем случае это навряд ли нужно), здесь подробнее написано.

Привет!

$(document).ready(function() {
    // инициализация Select2
    $(".city").select2({
        ajax: {
            url: "/ajax.php?action=main&type=get_city",
            type: "post",
            dataType: 'json',
            delay: 250,
            data: function(params) {
                return {
                    searchTerm: params.term
                };
            },
            processResults: function(response) {
                return {
                    results: response
                };
            },
            cache: true
        }
    });

    // глобальная переменная для хранения выбранного города
    let selectedCity = null;

    // обработчик выбора города
    $('.city').on('select2:select', function(e) {
        selectedCity = e.params.data.id; // или e.params.data.text в зависимости от того, что нужно
        console.log("Выбран город:", selectedCity);
    });

    // основная функция фильтрации
    function getFilter() {
        let action = 'get_data';
        let category = filterCategory('category');
        let city = selectedCity; // используем сохраненное значение города
        
        $.ajax({
            url: '/ajax.php?action=main&type=get_data',
            method: 'POST',
            data: { 
                action: action, 
                category: category, 
                city: city 
            },
            success: function(response) {
                $('#filterResults').html(response);
            }
        });
    }

    function filterCategory(classname) {
        let filter = [];
        $('.' + classname + ':checked').each(function() {
            filter.push($(this).val());
        });
        return filter;
    }

    $('.filter_click').click(function() {
        getFilter();
    });
});

Для мультиязыковых конфигов у тебя путь только к unicode, а значит выбор между:
нефиксированной длинны на символ - utf8mb4 и utf8mb3 (соответственно максимум по 4 байта и по 3 на символ)
и фиксированной 2/3/4 байта

выбирать нужно такую кодировку, которая лежит в основе языка программирования или используемого фреймворка (правда не сразу это и поймешь, например на python) что бы было меньше перекодировок. К примеру .net (c#) использует 16-битные двухбайтовые utf16

Как обычно, три ответа - и ни одного по делу

Кодировка таблиц в MySql должна быть utf8mb4.

Для немецкого я всегда ставлю utf8mb4_unicode_ci
Работает просто отлично.
А кодировка utf8mb4.
Но вы скорее всего будете выбирать тип сортировки, если через phpmyadmin.
Если руками будете таблицы создавать, то надо прописать типо
CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci
А когда будете создавать таблицу, то примерно так.

CREATE TABLE example (
  id INT PRIMARY KEY,
  name VARCHAR(255)
) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

https://unused-css.com/blog/css-shake-animation/

Чтобы не было, например, "обрезаний" при разных разрешениях экрана или "дополнения" пустых мест его дублированием

Геометрия говорит нам, что если пропорции блока и изображения не совпадают, то возможны три варианта:
- поля
- обрезка лишнего
- искажение пропорций

Поскольку, без искажений пропорций из одного изображения так сделать невозможно, то остается один вариант - подгружать разные файлы.

Но кроме пропорций, есть ещё поддержка форматов и плотность пикселей. Так что, сложность тут не одна.

Какие размеры файла желательны (в байтах)?

Минимальные. При этом нужно сохранять достаточное качество.

Этот вопрос не имеет смысла, даже если вы скажете размер вьюпорта/блока, но не покажете картинку. Потому что одна сожмется прекрасно, а другая заметно потеряет в качестве.

Для ретины и разных форматов файлов используйте image-set
Для разных размеров - @media
Для оптимизации размеров - форматы webp, avif

Без обрезки никак. Сами должны понимать. Если пропорции экрана отличаются от пропорций изображения, то обрезка будет по-любому.

Если это какой-то абстрактный фон, то без разницы. Берем несколько картинок разного размера (чтобы на мобилах не грузить лишнего) и подключаем их через медиа-запросы.

Если на фоне есть какой-то объект, то желательно, чтобы он был в центре (из-за обрезки по краям) и нужны два варианта изображения - вертикальное и горизонтальное. Так же через медиазапросы (portrait/landscape) подменяем. Плюс несколько размеров (2-3) под разрешение экранов, с учетом ретины - 2х.

Размер файла должен быть минимальным, это очевидно. Также очевидно, что точный желательный размер вам никто не скажет. Для уменьшения веса файла используйте конвертацию в webp формат.

Редактировать код компонентов Joomla можно, подключившись по FTP. Нужно понимать структуру этого компонента, а также структуру самой джумлы - это подскажет, где какие файлы лежат. Можете найти в телеграме чат "Joomla для профессионалов": там дружеский коллектив, всегда кто-то откликается на вопросы, или можно найти исполнителей на платной основе.

Для начала выбросить WP и сделать нормально.
Но в общем случае:
Создаете форму со всеми вопросами и показывает по одному, переключая через JS вопросы. В конце отправляете всю форму.
или
Если следующий вопрос зависит от ответа на предыдущий, то отправляете ajax-ом каждый вопрос отдельно и в ответе с бэкенда возвращаете следующий вопрос. Все необходимые данные (типа ID вопроса) можно хранить и обновлять в data-атрибутах.