Evtl. die Links zu den 2 Galerie-Seiten nennen, damit das Problem analysiert werden kann.

Sollen die Links nicht öffentlich sein, dann den Post auf "Privat" stellen, damit ihn nur die Mitarbeiter von Incomedia sehen können.

https://hansteterra.de/index.html

https://tedjohansson.de/index.html

Nach dem Einstellen auf Einstellen Responsive, Schritt 4 oben rechts, ist der Balken breit.

Die Seiten sind zu Testzwecken online.

Danke.

Offenbar nutzt WebSite X5 die verfügbare Breite des DIVs für die Beschreibungen und setzt darüber die Bilder mit unterschiedlich berechneten Breiten und Abständen zum linken Rand.

Mögliche Lösungen:

A) Eine Möglichkeit wäre, dass man nur Bilder mit gleichen Proportionen (z.B. Höhe:Breite = 2:3) verwendet, dann würden alle Bilder in der Galerie in voller Breite angezeigt.

B) Vielleicht können die Javascript-Experten etwas machen oder Incomedia eine Option wie z.B. "Breite der Beschreibung an Bildbreite anpassen" hinzufügen.

C) Da sich je nach Bild der Abstand zum linken Rand und die Bildbreite ändern, ist fraglich, ob mit CSS etwas zu machen ist. Aber da ich kein CSS-Experte bin, kann ich das nicht einschätzen.

.

----- Webentwicklerwerkzeug in Firefox bei meiner Test-Galerie -----

Hier meine Testseite mit Galerie und 4 Bildern, siehe

>> https://findelinks.de/123shop-hosteurope/galerie-mit-beschreibungen.html

Ein Bild ist in voller Breite und da passt dann die Breite der Beschreibung zum Bild.

Ja. Der Balken soll sich der Bteite des Bildes anpassen. Siehe oben. Vor dem responsiven Einstellen, ging es ja.

Der Balken passt sich aber nicht dem Bild an, sondern dem Objekt! Der Balken kann nur eine Einstellung haben und nicht genau die was das derzeit angezeigte Bild hat.  Ein Bild wäre kein Problem mit CSS zu machen, aber da es viele unterschiedliche Bilder sind, geht das nicht.

Möglicherweise würde es umgekehrt gehen, dass sich das Bild an das Objekt anpasst und ausfüllt, aber das geht glaube ich auch nur mit JAvaskript.

Na ja. Sie Bilder oben. Bevor ich die responsive Einstellung gemacht hatte, ging es ja.

(It > De) ... Wenn Sie wirklich interessiert sind und es keine anderen Lösungen von Experten gibt, ... könnte die Breite des Beschreibungsfelds, die der des zugehörigen Bildes entspricht, mit einer meiner Erfindungen mit EXTRA-Code erreicht werden ...
... also, wenn Sie daran interessiert sind, EXTRA fortzufahren, lassen Sie es mich einfach wissen, und ich werde hierher zurückkommen...

.

ciao

.

Ja, BITTE. So sieht es nicht wirklich schön aus. DANKE

... Ich schlage zwei meiner Ideen/Erfindungen vor, die Sie ausprobieren und nach Ihren Wünschen auswählen können ...
... das erste in einfachem CSS mit transparentem Hintergrund (*) und kontrastierendem Text...
(*) - vielleicht können Sie es auch mit Programmoptionen bekommen ...
... das zweite mit JS+jQ-Skript, wobei die gleichen Hintergrundeinstellungen beibehalten werden...

.

... hier ist der erste Code in CSS:
<style>
/*k*/div[id^='imObjectGallery_'] div[id$='_description'] {background-color:transparent !important;text-shadow: 1px 1px 1px black !important;}
</style>

.

.

... hier ist der zweite Code mit JS+jQ-Skript, den Sie bewerten müssen, ob er für Sie geeignet ist:
<script>
$(document).ready(function () {
/** -- controllo width DIV x WSx5 by KolAsim -- **/
setInterval(function(){
$("div[id^='imObjectGallery_'] div[id$='_description']").css("width",$("div[id^='imObjectGallery_'] img").width() + "px").css("left","50%").css( "transform","translate(-50%,0)")
}, 100);
});
</script>

.

ciao

.

Danke, danke.

Beim ersten Code müsste ich die Farbe des Textes ändern, weil er vor den Bildern schlecht zu sehen ist.

Beim zweiten Text springt der Text ein wenig, aber der Balken stimmt :)

Siehe Schnappschuss.

LG Hans

Danach springt der Text in den Balken:

Danke - Danke - Danke

... Ich gebe Ihnen einen neuen Code, den Sie als Alternative zum vorherigen Skript ausprobieren können:

<script>
$(document).ready(function () {//K>;
/** -- controllo descrizione gallery x WSx5 by KolAsim -- **/
styleK="<style>/*k*/div[id^='imObjectGallery_'] div[id$='_description'] {background-color:transparent !important}</style>";
$("head").append(styleK);
objectK1 = "#imObjectGallery_572";
objectK2="#imObjectGallery_571";
setInterval(function(){//K1>;
textK1= $(objectK1+" div > div > div").text()
textK2= $(objectK2+" div > div > div").text()
$(objectK1+" div > div > div").html('<span class="K" style="background-color:#8b0000;padding-left:5px;padding-right:5px">'+ textK1 + '</span>')
$(objectK2+" div > div > div").html('<span class="K" style="background-color:#8b0000;padding-left:5px;padding-right:5px">'+ textK2 + '</span>')
}, 500);//K1<<;
}); //K<<;
</script>

.

ciao

.

Danke. Ja der Text springt nicht mehr, aber dafür ist der Balken weg. :)) 

Ich habe es schon mit KI versucht, dir bekommt es auch nicht hin.

Danke für deine große Mühe.

LG aus Berlin

Hans

... Es tut mir leid, mir fallen leider keine anderen Alternativen ein...

.

ciao

.

Danke für deine Mühen.

Muss Website ändern. So ist es nicht schön.