Mobil-Ansicht Footer / Theme Bistro

[inno]

Hallo Tommy,

ist es möglich die Anordnung der Mobilversion vom Footer zu ändern wie im Screen.
Normal würde erst "Contact", dann Logobereich und dann "Working Hours" kommen.
Danke schon mal für die Hilfe.

[Tommy Herrmann]

Moin,

wahrscheinlich ja - muss man nur im "Code Editor" umkopieren. Das ist jetzt aber nur geraten, man müsste genau wissen um welches Thema und um welchen Block es sich handelt (Bezeichnung und Screenshot).

... und warum schreibst Du den Text nicht schlichtweg um, also was jetzt oben steht nach unten und umgekehrt

[inno]

Es geht um den Footer-Block vom Theme BistroM5.
Wenn ich es im Quelltext ändere, dann habe ich es ja auch auf der Desktopversion anders. Dort soll es so bleiben wie im Screen. Wo kann ich die Mobil-Ansicht anpassen? Grüße

[Tommy Herrmann]

müsste man mal nach einer @media-Anweisung in der CSS suchen oder selbet eine erstellen. Damit werden Dinge ab einer eingetragenen Display-Größe ander dargestellt.

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Im Beispiel vom Link wird also ab 600px der Hindergrund gelb, vorher blau:

Code: Alles auswählen

body {
  background-color: yellow;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

[inno]

... das hilft mir leider so nicht weiter. Danke trotzdem für die Hilfe!

[Werner-Zenk.de]

Hallo,
ich hätte das mit display: Grid gemacht, hier ein Beispiel: [Link entfernt]

[Tommy Herrmann]

Ich weiß immer noch nicht so ganz genau, was er hier überhaupt erreichen will. Der Umbruch am kleinen Display erfolgt doch in Mobirise, eben weil es ein Grid-System ist, ganz automatisch.

Das gesamte Mobirise-Layout ist ja auf einem Grid mit 12 Spalten aufgebaut. Eigentlich muss man sich hier nur den richtigen Block raus suchen.

Das "display: grid" ist ja eine CSS-Anweisung, die ich auch hier mal ausprobiert hatte. Das geht auch, ist aber in Mobirise irgendwie doppelt gemoppelt.

https://www.mobirise-tutorials.com/Test ... lumns.html

[Werner-Zenk.de]

Jetzt ohne doppelt gemoppelt,
ein Beispiel mit Bootstrap 5: [Link entfernt]

[Tommy Herrmann]

Moin,

ups - Werner moppelt mit Bootstrap

Vielen Dank Werner - das hilft natürlich sehr

Bootstrap hat vieles fix und fertig zu bieten


Am Handy - werden die <div> in dieser Reihenfolge auch angezeigt:

Code: Alles auswählen

      <div class="col-md-4 order-md-2 rot">Rot</div>
      <div class="col-md-4 order-md-3 gelb">Gelb</div>
      <div class="col-md-4 order-md-1 blau">Blau</div>

md ≥ 768px ("medium" / mittlere Größe)

... dann wechseln die <div> ab 768px Display-Größe auf die angegebene Position.

order-md-1 = ab 768px = Blau Position 1
order-md-2 = ab 768px = Rot Position 2
order-md-3 = ab 768px = Gelb Position 3

https://getbootstrap.com/docs/5.0/utilities/flex/#order

[Tommy Herrmann]

... und wenn Du das jetzt auf Deinen Footer vom Thema "BistroM5" umsetzen möchtest, müsstest Du zunächst die Reihenfolge dieser drei <div> ändern und das mittlere ganz nach oben setzen, damit es eben dann auch am Handy oben angezeigt wird.

Dann schreibst Du diese class="order-md" (Anzeige ab 768px Display-Breite) entsprechend zu jeder Class eines jeden <div> hinzu.

... also dann in dieser Reihenfolge (diese Class muss dann immer an allen <div> definiert sein):

oberste <div>:
order-md-2

mittlere <div>
order-md-1

untere <div>
order-md-3


Siehe den geänderten Code unten:

Code: Alles auswählen

            <div class="col-12 col-md-6 col-lg-4 offset-lg-1 order-md-2">
                <div mbr-if="showImage" class="footer_logo text-center">
                        <img src="../_images/logo_orange.png" alt="Mobirise" mbr-style="{'height': imageSize + 'rem'}">
                    </div>
                      <p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit ex voluptatem voluptas aut quod, autem obcaecati molestiae.</p>
                <div class="icons_footer" mbr-if="showIcons">
                            <a class="iconfont-wrapper" href="https://mobiri.se" target="_blank">
                                <span mbr-icon class="mbr-iconfont socicon-facebook socicon"></span>
                            </a>
                            <a class="iconfont-wrapper" href="https://mobiri.se" target="_blank" mbr-if="iconsAmount > 1">
                                <span mbr-icon class="mbr-iconfont socicon-twitter socicon"></span>
                            </a>
                            <a class="iconfont-wrapper" href="https://mobiri.se" target="_blank" mbr-if="iconsAmount > 2">
                                <span mbr-icon class="mbr-iconfont socicon-instagram socicon"></span>
                            </a>
                            <a class="iconfont-wrapper" href="https://mobiri.se" target="_blank" mbr-if="iconsAmount > 3">
                                <span mbr-icon class="mbr-iconfont socicon-linkedin socicon"></span>
                            </a>
                        </div>
            </div>            
            
            <div class="col-12 col-md-3 col-lg-3 order-md-1" mbr-if="showTitle || showText">
                <div class="footer_contact text-center">
                      <h5 class="mbr-section-title mbr-fonts-style" mbr-if="showTitle" data-app-selector=".mbr-section-title" mbr-theme-style="display-5">Contact Us</h5>
                      <p class="mbr-text mb-0 mbr-fonts-style" mbr-if="showText" data-app-selector=".mbr-text" mbr-theme-style="display-4"><a href="#" class="text-danger">350 5th Ave, New York, NY 10118</a>
                          <br><br>
                        <a href="tel:12345678900" class="text-danger">+1 234-567-8900</a>
                                                      <br>
                        <a href="tel:98765432100" class="text-danger">+9 876-543-2100</a>
                        </p>
                  </div>
            </div>

            <div class="col-12 col-md-3 col-lg-3 offset-lg-1 order-md-3" mbr-if="showTitle || showText">
                <div class="footer_timework text-center">
                      <h5 class="mbr-section-title mbr-fonts-style" mbr-if="showTitle" data-app-selector=".mbr-section-title" mbr-theme-style="display-5">Working Hours</h5>
                      <p class="mbr-text mb-0 mbr-fonts-style" mbr-if="showText" data-app-selector=".mbr-text" mbr-theme-style="display-4">
                          Monday-Friday:<br>
                            09:00-22:00
                          <br><br>
                            Saturday-Sunday:<br>
                            10:00-16:00

                        </p>
                  </div>
            </div>

Ansicht vom "Code Editor" (zu sehen sind im Screenshot nur die oberen beiden <div>):

... weiterhin benötigst Du dann noch etwas Abstand am Handy vom nun auf Position 2 sitzenden <div> "Contact", also habe ich der im "CSS Editor" des Blocks bereits vorhandenen class="footer_contact" ein magin-top von z.B. 50px verpasst.

Code: Alles auswählen

@media (max-width: 767px) {
  .footer_timework {
    margin-top: 50px;
  }
  .footer_contact {
    margin-top: 50px;
  }
}

Hier eine Beispielseite mit diesem Footer:

https://www.mobirise-tutorials.com/BistroM5/




Ansicht am Desktop:

Ansicht am Smartphone:

[Rancher]

Ich habe mich nicht in die Tiefen dieses Beitrags begeben.

Inno geht es doch darum, dass "Contact us", das am PC links steht (also an erster Stelle), auch am Handy oben als erstes steht.

[Tommy Herrmann]

Moin,

na das tut es ja automatisch. Solche "Karten" werden immer am Handy so eingelesen, dass am Handy das oben steht, was am Laptop links steht.

Es wird also immer gelesen > von links nach rechts / entspricht am Handy > von oben nach unten.


Er will eben "Kontakt" am Handy unter der am Desktop angezeigten mittleren Karte stehen haben.

ist es möglich die Anordnung der Mobilversion vom Footer zu ändern wie im Screen.
Normal würde erst "Contact", dann Logobereich und dann "Working Hours" kommen.

So wie er es im allerersten Beitrag in der obersten Grafik auch dargestellt hatte:

[inno]

Hallo zusammen, vielen Dank schon mal für die Hilfe. Ich teste das und melde mich wieder.

[inno]

Hallo Tommy, hat alles super funktioniert! Klasse! Danke dir!!!