Jimdo-Elemente » Spalten in mobiler Ansicht

22.07.2020 15:45

Ava Eltin
#1

Av

Hallo!

Ich beiße mir gerade die Zähne an einem Problem aus:
Ich habe eine Seite mit mehreren Reihen mit 6er-Spalten, welche ich mit einem 2-Zeiler Text und darunter einem Bild fülle. Bei der Erstellung dieser Seite war alles unauffällig und die Bilder wurden in der mobilen Ansicht untereinander in voller Breite angezeigt. Nachdem ich an der Seite ein paar Bilder untereinander (Drag&Drop) getauscht hatte, waren die "neuen" Bilder plötzlich viel kleiner.

Mittlerweile habe ich zur Fehlersuche drei verschiedene Seiten angelegt und immer wieder die gleiche Spaltenanzahl und die identischen Fotos (alle 1000x1000px) genutzt. Ich habe verschiedene Browser genutzt und jeglichen Code im Header vorher gelöscht. Und trotzdem habe ich mittlerweile auf allen Seiten völlig unterschiedliche Bildgrößen in der mobilen Ansicht. Teilweise so klein wie eine Briefmarke, manche etwas größer und bei den "alten" die gewünschte Darstellung in voller Breite.

Nun meine zwei Fragen an euch: Habt ihr von diesem Problem schonmal gehört und kennt die Lösung? Und wisst ihr, wie die "Standarddarstellung" von Bildern in einer 6-er Spalte bei Jimdo eigentlich aussehen sollte?

Leider kann ich die Seite nicht teilen, da sie im Wartungsmodus ist.

Viele liebe Grüße!
Ava

Antworten

Beitrag melden

#2

23.07.2020 13:51 (zuletzt bearbeitet: 23.07.2020 13:55)

subcon
#2

subcon

Ich hatte ein quasi ähnliches Problem und habe es dann mit Media Queries umgeschrieben so dass es funktioniert hat...
Im Endeffekt kommt es dann auf die Bildschirmgröße an, je nachdem sind die dann nebeneinander oder untereinander...

Link dazu ist hier: https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Dort gibt es auch ein "try me" wo du den geteilten Bildschirm hin und her schieben kannst...

Bei mir schaut das so aus:

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div class="row" align="center">
    <div class="column" align="center">
        <a href="https://www.domain.at/" target="_blank"><img class="fremdlogos" title="Titel Bild" src=
        "https://www.domain.at/bild.png" alt="Logo Alt-Text Bild" style="height:50px" /></a>
    </div>
<div class="column" align="center">
        <a href="https://www.domain.at/" target="_blank"><img class="fremdlogos" title="Titel Bild" src=
        "https://www.domain.at/bild.png" alt="Logo Alt-Text Bild" style="height:50px" /></a>
    </div>
<div class="column" align="center">
        <a href="https://www.domain.at/" target="_blank"><img class="fremdlogos" title="Titel Bild" src=
        "https://www.domain.at/bild.png" alt="Logo Alt-Text Bild" style="height:50px" /></a>
    </div>
</div>
 
 

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
@media (min-width:800px) {
  .row {
    flex-direction: row;  
  }  
}
@media (max-width:800px) {
  .column {
    display: flex;
    margin: auto;
  }  
}
.column {
  flex: 33.33%;
  padding: 5px;
}
 

und ansehen kannst du dir das Ergebnis auf meiner "Services" Seite hier: https://www.subcon.at/leistungen/

Antworten

Beitrag melden

#3

24.07.2020 16:38 (zuletzt bearbeitet: 24.07.2020 16:39)

az_
#3

az_

...eine URL hilft manchmal sehr, auch wenn im Wartungsmodus.

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html