WebSite X5Help Center

 
M. M.
M. M.
User

Mobile Ansicht Bilder nebeneinander statt untereinander  de

Auteur : M. M.
Visité 1167, Followers 1, Partagé 0  

Hallo, 

besteht die Möglichkeit Bilder in der Mobile-Ansicht nebeneinander, zumindest zwei Stück so wie in dem Beispiel, aufzeigen zu lassen.

Ich möchte die Bilder auf der Desktopversion jetzt nicht extra klein machen.

Posté le
9 RéPONSES
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Da in der kleinsten Ansicht immer alle Styles deaktiviert und auch alles umgebrochen wird, gibt es hier nur 2 Möglichkeiten!

Entweder du gibst noch einen weiteren Breakpoint hinzu 320px  oder du machst mit einem Grafikprogramm zwei Bilder nebeneinander und bindest diese in ein Grafikobjekt ein.

Alles andere ist nur individueller Code den man einfügen müsste.

Lire plus
Posté le de Andreas S.
M. M.
M. M.
User
Auteur

Guten Morgen, vielen Dank für die zeitnahe Antwort.

Ich würde gerne beide alternative ausschöpfen und mich dann für das ansprechendere entscheiden.

Wie und wo füge ich einen weiteren Breakpoint hinzu ?

„du machst mit einem Grafikprogramm zwei Bilder nebeneinander und bindest diese in ein Grafikobjekt ein“

kommt die Grafik in den Hintergrund des Objektiv oder wie ?

Vielen Dank vorab.

Lire plus
Posté le de M. M.
M. M.
M. M.
User
Auteur

Also den Bereich für den Breakpoint habe ich gefunden, da kann ich allerdings nur vier Werte der jeweiligen Endgeräte eintragen.

Mehr ist laut der Software leider nicht möglich. 

Lire plus
Posté le de M. M.
Klaus G.
Klaus G.
User

Oder du verwendest so was cool

Dieser Code bewirkt die Bildgrößen Änderung.

Du mussst den Selector des jewiligen Bildes finden (fett markiert) und ändern, des weiteren width: XXXpx ändern.

So in dieser Richtung könntest du dein Ziel auch erreichen ohne die Bilder neu anzulegen.

Dieser Code ist nur ein Beispiel:

<style>
@media (max-width: 1079px) and (min-width: 1024px) {#imTextObject_4_26_tab0 .image-0 { width:180px !important; max-width:180px !important; }}
@media (max-width: 1023px) and (min-width: 800px) {#imTextObject_4_26_tab0 .image-0 { width:180px !important; max-width:180px !important; }}
@media (max-width: 769px) and (min-width: 640px) {#imTextObject_4_26_tab0 .image-0 { width:160px !important; max-width:160px !important; }}
@media (max-width: 639px) and (min-width: 480px) {#imTextObject_4_26_tab0 .image-0 { width:160px !important; max-width:160px }}
@media (max-width: 479px) and (min-width: 360px) {#imTextObject_4_26_tab0 .image-0 { width:250px !important; max-width:250px !important;  }}
@media (max-width: 359px) and (min-width: 320px) {#imTextObject_4_26_tab0 .image-0 { width:265px !important; max-width:265px !important;  }}
</style>

Wenn die Seite online ist wäre ein Link hilfreich cool

Gruß

MCMACMASTER

Lire plus
Posté le de Klaus G.
M. M.
M. M.
User
Auteur

Hallo Klaus, 

die Variante klingt super. Der Aufbau der Seite und die Domain sind leider noch nicht eingerichtet. 

Füge ich den oben aufgeführten Code in einem HTML-Objekt ein ? 

Mit dem oben aufgeführten Code definiere ich meine Zellen oder ? und in den jeweiligen Zellen sind dann die Bilder einzuzfügen ?

Wie ordne ich denn die Bilde dem Code zu #imTextObject_4_26_tab0.image-0 ?

Lire plus
Posté le de M. M.
Pcssa .
Pcssa .
Moderator

. . . versuchst Du das mit Deiner 14er Version oder mit der DEMO 2019.3-Evo ?

Lire plus
Posté le de Pcssa .
M. M.
M. M.
User
Auteur

Ich versuche es mit der 14 

Lire plus
Posté le de M. M.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Wenn du noch wenig Erfahrung hast mit dem Programm, dann würde ich die Code Variante nicht versuchen. In ein HTML Objekt nicht sondern unter "Seo&Code vor dem </head> Tag! Aber so einfach ist es nicht weil es individuell auf deine Seite abgestimmt werden muss.

Wenn du die EVO V14 hast dann gehen nur 4 Breakpoints! Hierfür einen zu opfern bringt nichts. Die 2. Methode mit den 2 Bildern nebenan wäre besser für dich.  Wo du die Bilder einbindest ist dir überlassen.

Lire plus
Posté le de Andreas S.
M. M.
M. M.
User
Auteur

Vielen dank für die bisherigen Ratschläge. 

Wie kann ich mir die 2. Methode konkret vorstellen ? Mir gehts in erster linie darum, dass ich zumindest die Startseite in den jeweiligen Ansicht mit minimalen Unterschieden aufzeigen. 

Vielen Dank :)

Lire plus
Posté le de M. M.