CSS для размера модуля (похож на @media)? - PullRequest
Новая
       16

CSS для размера модуля (похож на @media)?

0 голосов
/ 23 октября 2019

У меня есть модуль Joomla, который я пытаюсь реагировать на разные размеры экрана, но отображая и скрывая столбцы. Это хорошо работает на полностраничных дисплеях. 

@media (max-width: 800px) {
    .team_name { display:none; }
    .team_abbr { display:inline-block;}
    .overall { display: inline-block;}
    .divisional { display:inline-block;}
    .wide { display:none;}
    #btn_row { display:inline-block;}
    #div_split { display:none;}
}

@media screen and (min-width: 800px) {
    .team_name { display: inline-block; }
    .team_abbr { display:none;}
    .overall { display: inline-block;}
    .divisional { display:inline-block;}
    .wide { display:inline-block;}
    #btn_row { display:none;}
    #div_split ( display:inline-block;)
}

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

Существует ли команда CSS, аналогичная @media, которая получит ширину модуля вместо всей ширины страницы, на которой находится модуль?

Заранее спасибо ...

1 Ответ

0 голосов
/ 11 ноября 2019

Один из способов сделать это - добавить класс в ваш модуль, а затем изменить размер элементов внутри модуля относительно их родителя (то есть модуля).

(1) Начните с перехода к нужному модулю. работать над> дополнительной вкладкой> суффикс класса модуля

(2) Добавьте класс и не забудьте включить пробел в начале, например, 'my-module-class'

(3) Наконец, размер элементов вашего модуля относительно модуля, например 

@media (max-width: 800px) {

    .team_abbr { 
       ...
       width:50%;
     }  
}

Удачи, надеюсь, это поможет!

...