Jump to content

Hosting dHosting.pl - 10% rabat!

Sign in to follow this  
dzagu

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

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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) { ... } 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.