Darstellungsproblem auf iDevices (Variable Breite)

Hallo zusammen

ich darf eine Homepage überarbeiten und sammle nach einer Drupal-Zeit Erfahrungen mit Joomla. Diese Seite bin ich am aufbauen:
internetgedichte.ch/joomla , die allerdings noch nicht live ist.

Ich konnte soweit alles einrichten. Folgende Eckdaten hat diese Seite und der Webserver:
SITE INFORMATION
OS Linux s
PHP 5.4.45-0+deb7u2
MySQLi 5.5.46-0+deb7u1
Zeit 20:46
Cache Deaktiviert
GZip Deaktiviert
Joomla! 3.4.8 — © 2016
Verwendetes Template: wt_blank_free - Standard
Betroffenes Modul: RIE - Random Image Extended

Da der Schwerpunkt dieser Seite auf dem Lesen mit möglichst wenig Ablenkung sein soll, aber doch mit diversen Bildern ein wenig Abwechslung auf die Seite gebracht werden soll, habe ich mich für das erwähnte Bildermodul entschieden. In diesem Modul habe ich die Breite und Höhe des Moduls auf 200x800 festgelegt, da auch die Bilder dieses Format haben. Im Template habe ich die seitlichen Bereich mit 25% angegeben. Nun das Modul selber funktioniert einwandfrei und wechselt wunschgemäss in längeren Abständen die Bilder. Und wenn ich es im Brower (IE /Edge /Safari/Firefox usw.) anschaue, ist alles soweit iO.

Wenn ich es allerdings auf dem iPad anschaue, dann werden die linken Bilder in den Text geschoben. Wenn ich im Template die Seitenbereiche auf 20% anpasse, dann wird der Abstand zum eigentlichen Content zu gross und 30% sieht auch nicht wirklich cool aus am PC. 25 % wären optimal. Ich habe im Template auch die Möglichkeit Scripts einzubinden, die das Template übersteuern, also sowas wie eine custom.css. Damit habe ich auch schon erfolgreich die FB-Likebox eingebunden.

Hat jemand eine Idee, wie man das mit CSS oder der Möglichkeit der Scripts besser lösen kann?

Ich bin froh, um jeden Tipp!

Danke!
Follower

Hallo Follower
Ich kenne das Modul nicht.
Kannst du dort bei der Thumbnails-Einstellung bei der Breite nichts eingeben? also leer lassen?
Ist dort keine fixe Breite, dann funktioniert es, dass sich die Bilder verkleinern, wenn es nötig ist.
Das "max-width: 100%;" greift.
Ich habe es mit dem Firebug ausprobiert. Ohne die Breitenangabe funktioniert es.

Wenn das nicht geht, muss du in der theme.css angeben, dass es früher auf responsive umstellt.
Hier einen höheren Wert: @media (min-width: 768px)

lg, Pascale

Am gescheitesten wäre es, Viktor, den Entwickler selbst zu fragen, der betreibt nämlich ein Supportforum. Dort könnte man dasdada entdecken. Vieleicht hilft das weiter?

Danke für eure vorläufigen Antworten.

@Pascale:
Die gewünschten Thumbnails-Einstellungen habe ich im Modul nicht gefunden. Dort hat es nur Einstellungen wie im Anhang ersichtlich. Dort habe ich dann noch den Punkt "Seitenverhältnisse beibehalten" von JA auf NEIN gewechselt, hat aber auch keine Besserung gebracht.

pascale schrieb: Das "max-width: 100%;" greift.
Ich habe es mit dem Firebug ausprobiert. Ohne die Breitenangabe funktioniert es.

max-widht habe ich leider nicht gefunden in der theme.css, um dies anzupassen. Oder könnte ich dies auch im custom.css eintragen?

Wenn das nicht geht, muss du in der theme.css angeben, dass es früher auf responsive umstellt.
Hier einen höheren Wert: @media (min-width: 768px)

Ich habe das mit @media ausprobiert. Im theme.css habe ich den Wert @media wie von dir beschrieben angepasst, hat aber nichts gebracht. Als ich dann nach anderen Einträgen dieser Sorte gesucht habe wurde ich fündig:

/* Large screen and bigger */
@media (min-width: 1220px) {
/* Horizontal */

/* Tablet and bigger */
@media (min-width: 768px) {
.uk-grid-divider > [class*='uk-width-medium-']:not(.uk-width-medium-1-1):nth-child(n+2) {
border-left: 1px solid #dddddd;

/* Desktop and bigger */
@media (min-width: 960px) {
.uk-grid-divider > [class*='uk-width-large-']:not(.uk-width-large-1-1):nth-child(n+2) {
border-left: 1px solid #dddddd;
}

}
/* Large screen and bigger */
@media (min-width: 1220px) {
/*
* Large gutter

/* Phone landscape and bigger */
@media (min-width: 480px) {
.uk-grid-width-small-1-2 > * {
width: 50%;
}

}
/* Tablet and bigger */
@media (min-width: 768px) {
.uk-grid-width-medium-1-2 > * {
width: 50%;

}
/* Desktop and bigger */
@media (min-width: 960px) {
.uk-grid-width-large-1-2 > * {
width: 50%;
}

}
/* Large screen and bigger */
@media (min-width: 1220px) {
.uk-grid-width-xlarge-1-2 > * {
width: 50%;
}

}
/* Phone landscape and bigger */
@media (min-width: 480px) {
/* Whole */
.uk-width-small-1-1 {
width: 100%;
}

/* Tablet and bigger */
@media (min-width: 768px) {
/* Whole */
.uk-width-medium-1-1 {
width: 100%;
}

}
/* Desktop and bigger */
@media (min-width: 960px) {
/* Whole */
.uk-width-large-1-1 {
width: 100%;
}

/* Tablet and bigger */
@media (min-width: 768px) {
[class*='uk-push-'],
[class*='uk-pull-'] {
position: relative;
}

}
/* Large screen and bigger */
@media (min-width: 1220px) {
.uk-panel + .uk-panel-divider {
margin-top: 70px !important;
}

usw. es hat noch etliche andere. Eine Bezeichnung zum Modul finde ich nicht. Es hat auch mehrere andere. Habe das CSS deshalb mal beigefügt.

@Chris: Danke für den Tipp: Allerdings hat das Einfügen ins CSS von...

.random_image_extended img {
height: 100%;
width: 100%;
}

...auch nichts gebracht.

Sorry, dass ich euch soviel Mühe bereite, aber ich hätte mir es auch anders gewünscht.

Bin froh um alle weiteren Tipps.

Danke und Gruss
Follower

Hallo Follower,
du hast doch das Bild "RIE.jpg" angefügt. Dort ist bei Breite (px) = 200 eingefügt.
Probier mal, dieses Feld leer zu lassen.

max-width=100% ist für Bilder schon eingetragen. Aber weil das Modul eine fixe Breite von 200px hat, darum greift dies nicht.

Sorry: @media (min-width: 768px)
ist falsch. es müsste max-width sein. in bootstrap.css hat es auch solche Statements. es wird schwierig, das richtige zu finden.
lg, Pascale

Hallo Pascale
habe deine Ratschläge befolgt: Mit alles löschen hat es nicht funktioniert, es wurde wieder der letzte Wert angezeigt (200px). Mit 0 geht es auch nicht, dann wird kein Bild angezeigt. Schliesslich habe ich es noch mit eine Leerschlag (Blank / Space) probiert......... und siehe da. Jetzt ist das Feld leer, und die Bilder werden auch auf dem Pad korrekt angezeigt! Super! Danke für deine Hinweise!
Lieber Gruss
Follower

super! das mit dem Leerschlag muss ich mir merken.