Subfora w dwóch kolumnach i w jednej kolumnie na urządzeniach mobilnych

[dzagu]

Korzystam z domyślnego szablonu. W custom.css posiadm taki kod:

/**
 * This file is for your custom CSS.
 * This file is not modified or overwritten during upgrades
 */
.ipsDataItem_subList{ overflow: hidden; }
 
        html[dir="ltr"] .ipsApp .ipsDataItem_subList,
        html[dir="rtl"] .ipsApp .ipsDataItem_subList{
            background: none;
            line-height: 180%;
            padding-left: 0 !important;
            padding-right: 0 !important;
            padding-bottom: 4px;
        }
        
        .ipsDataItem_subList li{
            float: left;
            width: calc(100% / 2 - 5px);
        }
 
        html[dir="rtl"].ipsDataItem_subList li{ float: right; }
        
        .ipsDataItem_subList li a:after{ display: none; }
    
        html[dir="rtl"] .ipsDataItem_subList.ipsList_inline > li{ margin-left: 0; }

Jak zrobić aby była tylko jedna kolumna na urządzeniach mobilnych?

[Macsch15]

Musisz objąć konkretne elementy CSS które odpowiadają za wyświetlanie subforów w dwóch kolumnach w tagi @media i ustawić odpowiedni breakpoint dla nich.

 

Przykładowe breakpointy:

 /* Małe urządzenia - 576px i więcej */
@media (min-width: 576px) { ... }

/* Średnie urządzenia - 768px i więcej */
@media (min-width: 768px) { ... }

/* Duże urządzenia - 992px i więcej */
@media (min-width: 992px) { ... }

/* Duże urządzenia - 1200px i więcej */
@media (min-width: 1200px) { ... }