A sáv fejléce és gombjai mobilon

A fejléc elemei és a cím mobilon

A sáv fejlécében három elem lehet: logó, cím és bezáró gomb. Mobilon (425 képpont vagy keskenyebb képernyőn) a Complianz alapból elrejti a címet. Ennek az az oka, hogy ha logó és bezáró gomb is be van kapcsolva, a cím a legszélesebb elem, ezért ez megy ki a helyből. A cím elrejtése akkor is érvényes, ha nincs bekapcsolva logó vagy bezáró gomb.

A cím a .cmplz-cookiebanner .cmplz-title elem, a logó a .cmplz-logo, a bezáró gomb a .cmplz-close, a három együtt a .cmplz-header blokkban van. Ha nincs logód és bezáró gombod, a címet egyéni CSS-sel visszahozhatod mobilra: a .cmplz-cookiebanner .cmplz-header .cmplz-title elemnek kell a mobilos display: none helyett látszania. A CSS-t a Complianz → Consent Banner → Custom CSS fülre írd.

Három elrendezés mobilra

A fejléc elemeit háromféleképpen rendezheted át, attól függően, mit szeretnél látni:

1. Cím és bezáró gomb. A cím visszakerül, balra igazítva, a bezáró gombbal együtt. A logó nem marad meg.
2. Cím és logó. Nincs bezáró gomb, de a logó és a cím látszik.
3. Csak cím. A cím középre kerül, a logó és a bezáró gomb rejtve van.

Mindhárom változat egyéni CSS-sel készül, a fejléc rácsos (grid) elrendezésének átállításával; az elemek elrejtéséhez vagy mozgatásához a fent felsorolt osztályokat használd.

Gombok egymás alatt

A 6.0-s kiadásban a Complianz megszüntette a gombok sorrendi kiemelését, mert a joggyakorlat és az adatvédelmi irányelvek szerint a látogatót nem szabad egy bizonyos választásra terelni. A korábbi sáv az elfogadó gombot a többi fölé tette; az új sávban a gombok egy sorban, egyforma súllyal vannak.

Ha mégis egymás alatt szeretnéd őket, egyéni CSS-sel kell a gombok konténerét (.cmplz-buttons) átállítani úgy, hogy ne sorban jelenjenek meg. Egy működő példa a Kedvenc sáv újraalkotása CSS-sel fejezetben van: ott a .cmplz-cookiebanner .cmplz-buttons szabály display: unset !important értéke teszi egymás alá a gombokat, a szélesség pedig külön szabály.

Ügyelj arra, hogy a gombok egymás alatt is egyenrangúan látsszanak (azonos méret és szín), különben a sáv terelő megjelenésűnek számíthat. Erről a Testosztályok régió és hozzájárulás szerint, a TCF-sáv testreszabása fejezet is szól.

Gombok egy sorban mobilon

Az alapsáv mobilos nézetében a gombok egymás alatt állnak, ezért a sáv magas. Ha alacsonyabb sávot szeretnél, a gombok konténerének irányát oszlopról (függőleges) sorra (vízszintes) kell váltani. Ez a padding csökkentésén túli, másik módszer a sáv mobilos méretének mérséklésére.

Illeszd be az alábbi szabályt a Complianz → Consent Banner → Custom CSS fülre:

/* Egymás alatti gombok helyett egy sorban */
@media (max-width: 768px) {
  .cmplz-cookiebanner .cmplz-buttons {
    flex-direction: row !important;
  }
}

A szabály csak a 768 képpontnál keskenyebb képernyőkön érvényes, az asztali nézetet nem változtatja meg. A gombok ilyenkor egymás mellé kerülnek, így a sáv kevesebb helyet foglal el a telefon képernyőjén.