Mindest- und Maximalbreite von Footer Boxen festlegen

[mboo]

Hallo Zusammen,

ich habe in meinem Footer ein paar Bilder zu den Zahlungsmethoden eingearbeitet.

Die Footerboxen sollen mindestens 200 px breit sein und max 25 % breit. Auf dem Desktop sind es dann 4 Boxen nebeneinander und das passt so.
Das Ziel ist, dass die Footerboxen bspw. auf dem Handy nicht nebeneinander ( bei mir sind es auf dem Handy zwei spalten und zwei zeilen ) sondern untereinander sind ( eine Spalte mit 4 zeilen ).

Kann mir hier jemand helfen wie ich das hinbekomme.

Vielen Dank im Voraus für eure Mühe.
Markus

 

[david]

AW: Mindest- und Maximalbreite von Footer Boxen festlegen

Hallo Markus,

das Evo-Template nutzt Bootstrap und mit dem Bootstrap-Gridsystem kannst du deine Anforderung umsetzen.

 

[marmad]

AW: Mindest- und Maximalbreite von Footer Boxen festlegen

Hallo,

wo genau und wie kann die Einstellung vorgenommen werden, dass auf einem smartphone der footer mit den Boxen nur 1-spaltig dargestellt wird? Wir benutzen das evo Template in 4.0.2

 

[mboo]

AW: Mindest- und Maximalbreite von Footer Boxen festlegen

Hallo,

ich habe das in meine custom.css eingetragen


@media (max-width: 480px) {

.col-xs-6 {
width: 100%;
}
}


Funktioniert zwar, ob es aber der korrekte Weg ist weis ich nicht.

Vg
Markus

 

[ag-websolutions.de]

AW: Mindest- und Maximalbreite von Footer Boxen festlegen

Du hättest in der tpl-datei abändern sollen auf

col-xs-12

bootstrap baut auf ein 12 spaltiges gridsystem. 6 spalten sind nun mal nicht 100% davon sondrrn 50%

 

[marmad]

AW: Mindest- und Maximalbreite von Footer Boxen festlegen

Danke schonmal für die Antworten. Handelt es sich hierbei um die footer.tpl?

 

[marmad]

AW: Mindest- und Maximalbreite von Footer Boxen festlegen

also ich hab mir jetzt die footer.tpl aufgerufen und folgendes geändert (vorher war es col-xs-6):
Ist das richtig? Oder muss es an anderer Stelle geändert werden?

{if !$bExclusive}
<div class="clearfix"></div>
<footer id="footer"{if isset($Einstellungen.template.theme.pagelayout) && $Einstellungen.template.theme.pagelayout === 'fluid'} class="container-block"{/if}>
<div class="container{if $Einstellungen.template.theme.pagelayout === 'full-width'}-fluid{/if}">
{if isset($Einstellungen.template.theme.pagelayout) && $Einstellungen.template.theme.pagelayout != 'fluid'}
<div class="container-block clearfix">
{/if}

{load_boxes_raw type='bottom' assign='arrBoxBottom' array=true}
{if isset($arrBoxBottom) && count($arrBoxBottom) > 0}
<div class="row" id="footer-boxes">
{foreach name=bottomBoxes from=$arrBoxBottom item=box}
<div class="col-xs-12 col-md-3">