Функция главной страницы

Настройка Компонент темы
,
134

Я пытаюсь заставить это работать как единственную тему с выделенным изображением и на десктопе, и на мобильных устройствах.

CSS не совсем для этого предназначен, но мне удалось это обойти с помощью следующего кода, чтобы изображение красиво отображалось на всю ширину:

.featured-topic-wrapper .featured-topics .featured-topic {
    max-width: none !important; 
    .featured-topic-image {
    max-width: 800px !important; 
    width: 100%;
    }
}

Однако решение плохо адаптируется к изменению ширины экрана или к мобильным устройствам, теряя пропорции (что я очень хотел бы сохранить). Я обошел это, выбрав изображение подходящего размера и прописав жестко другую высоту.

Есть ли простое изменение, которое я могу внести, чтобы сделать это адаптивным? Также стоит ли доработать CSS этого компонента, чтобы лучше поддерживать сценарий использования с единственной темой с выделенным изображением?

3 лайка