Automatické pridávanie situácií do dalšieho riadku

[KuboHBA]

Ako máme nastavené dokumenty na msp, tak potrebujeme nastaviť aj životné situácie na paas.sk. Ďalšia dlaždica sa automaticky pridá do gridu. Desktop - grid 3 stĺpce, tablet - 2 stlpce , mobil ideálne slider (dizajn slideru podľa figmy msp - články, dokumenty, hero sekcia). Skúsme na slider použiť riešenie z článkov polície.

plus prosím spísať dokumentáciu k postupu ako auto grid nastaviť na akejkoľvek inej stránke

[TuTuc0]

Spravil som karty situácií cez samostatné moduly Torq Card (namiesto samostatných stľpcov s textom pre každú situáciu).

• jedna sekcia pre všetky verzie stránky
• vytvorenie Presetu - White-Card pre Torq Card
• kód je zatiaľ vložený priamo do sekcie

<style>

/* uprava zobrazenia modulov v stlpci */
/* verzia pre desktop, mriezka zo 3 stlpcami */
@media screen and (min-width: 1280px) {
    .column-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));  /* 3 stľpce pre desktop */
        grid-gap: 32px;   /* medzera medzi stľpcami */
        grid-row-gap: 48px;  /* medzera medzi riadkami */
        grid-row: ;
    }
}

/* uprava zobrazenia modulov v stlpci */
/* verzia pre desktop, mriezka so 4 stlpcami */
@media screen and (min-width: 768px) and (max-width: 1279px) {
    .column-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 stľpce pre tablety */
        grid-gap: 16px;
        grid-row-gap: 12px;
    }
}

/* uprava zobrazenia modulov v stlpci */
/* verzia pre mobil, moduly ako slider */
@media screen and (max-width: 767px) {
    .column-grid {
        display: flex;
        overflow-x: auto;
        width: calc(100% - 16px) !important;
        margin-right: 0px;
        margin-left: auto;
    }

    .column-grid > * {
        flex: 0 0 80%; /* 80% šírka karty */
        margin-right: 16px; /* medzera medzi kartami */
    }

    .column-grid > :last-child {
        margin-right: 0; /* odstránenie odskoku pre poslednú kartu */
    }
}

</style>

[TuTuc0]

Postup pre pridanie do stránky:

• vloženie CSS kódu do Divi (globálne nastavenie témy):

  
  /* úprava zobrazenia modulov v stľpci */
  /* verzia pre desktop, mriežka s 3 stľpcami */
  @media screen and (min-width: 1280px) {
  .column-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));  /* 3 stľpce pre desktop */
      grid-gap: 32px;   /* medzera medzi stľpcami */
      grid-row-gap: 48px;  /* medzera medzi riadkami */
      grid-row: ;
  }
  }

/ uprava zobrazenia modulov v stlpci / / verzia pre desktop, mriezka so 4 stlpcami / @media screen and (min-width: 768px) and (max-width: 1279px) { .column-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); / 2 stľpce pre tablety / grid-gap: 16px; grid-row-gap: 12px; } }

/ úprava zobrazenia modulov v stľpci / / verzia pre mobil, moduly ako slider / @media screen and (max-width: 767px) { .column-grid { display: flex; overflow-x: auto; width: calc(100% - 16px) !important; margin-right: 0px; margin-left: auto; }

.column-grid > * {
    flex: 0 0 80%; /* 80% dľžka jedného objektu v slideri */
    margin-right: 16px; /* medzera medzi objektami */
}

.column-grid > :last-child {
    margin-right: 0; /* Remove margin for the last item */
}

}

- nastavenie CSS triedy pre daný stľpec:
`column-grid`

- úprava riadku na zobrazenie verzie pre mobil (slider):
` nastavenia nižšie použiť **len pre mobilnú verziu!** `
`nastavenie ľavého okraju (16px)`
`nastavenie šírky a max. šírky riadku na 100% alebo pomocou CSS kódu:  width: 100% !important `