Abstände zwischen den Bildern verkleinern (Theme BistroM5)

[inno]

Hallo, wie kann ich die Abstände zwischen den Bilder verkleinern?

Code: Alles auswählen

<section data-bs-version="5.1" class="features3" group="Features" mbr-class="{'mbr-parallax-background':bg.parallax}">
    <mbr-parameters>
        <header>Size</header>
        <input type="checkbox" title="Full Width" name="fullWidth" checked="">
        <input type="range" inline="" title="Top" name="paddingTop" min="0" max="10" step="1" value="4">
        <input type="range" inline="" title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="4">
        <header>Show/Hide</header>
        <input type="checkbox" title="Subtitle" name="showSubtitle">
        <input type="checkbox" title="Title" name="showTitle" checked="">
        <input type="checkbox" title="Text" name="showText" checked="">
        <input type="range" name="textWidth" title="Width" min="4" max="12" step="1" value="7" condition="showSubtitle || showTitle || showText">
        <select title="Align" name="contentAlign" condition="showSubtitle || showTitle || showText">
            <option value="">Left</option>
            <option value="justify-content-center" selected="">Center</option>
            <option value="justify-content-end">Right</option>
        </select>
        <header>Cards</header>
        <select title="Columns" name="cardsWidth">
            <option value="12">1</option>
            <option value="6">2</option>
            <option value="4">3</option>
            <option value="3" selected="">4</option>
        </select>
        <input type="checkbox" title="Auto Size" name="autoSize" checked="">
        <input type="range" name="imageHeight" title="Height" min="1" max="5" step="1" value="4" condition="!autoSize">
        <input type="checkbox" title="Border" name="showBorder" checked="">
        <input type="color" title="Color" value="#dddddd" name="borderColor">
        <header>Background</header>
        <fieldset type="background" name="bg" parallax="">
            <input type="image" title="Image" value="../_images/background.jpg" parallax="">
            <input type="color" title="Color" value="#ffffff" selected="">
        </fieldset>
        <input type="checkbox" title="Second Color" name="bgColor2" condition="bg.type == 'color'" checked="">
        <input type="color" title="Color" value="#fef2f2" name="twoBgColor" condition="bgColor2 &amp;&amp; bg.type == 'color'">
        <input type="range" name="bgHeight" title="Proportion" min="1" max="10" step="1" value="6" condition="bgColor2 &amp;&amp; bg.type == 'color'">
        <input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'">
        <input type="color" title="Overlay Color" name="overlayColor" value="#ffffff" condition="overlay &amp;&amp; bg.type !== 'color'">
        <input type="range" inline="" title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.9" condition="overlay &amp;&amp; bg.type !== 'color'">
        <!-- End block parameters -->
    </mbr-parameters>

    <div class="mbr-overlay" mbr-if="overlay &amp;&amp; bg.type!== 'color'" mbr-style="{'opacity': overlayOpacity, 'background-color': overlayColor}"></div>
    <div class="two_background"></div>
    
    <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
        <div class="row {{contentAlign}}" mbr-if="showSubtitle || showTitle || showText">
            <div class="col-12 col-md-12 col-lg-{{textWidth}}">
                <div class="main_header text-center">
                    <h3 class="mbr-section-subtitle mbr-fonts-style" mbr-if="showSubtitle" data-app-selector=".mbr-section-subtitle" mbr-theme-style="display-4">THE TEAM</h3>
                    <h2 class="mbr-section-title mbr-fonts-style" mbr-if="showTitle" data-app-selector=".mbr-section-title" mbr-theme-style="display-1">SWEET PIE</h2>
                    <p class="mbr-text mb-0 mbr-fonts-style" mbr-if="showText" 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 optio consequuntur.</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="item features-image сol-12 col-md-6 col-lg-{{cardsWidth}} active">
                <div class="item-wrapper">
                    <div class="item-img">
                        <img src="../_images/vertical/bistroVertical9.jpg" data-slide-to="0" data-bs-slide-to="0" alt="">
                    </div>
                </div>
            </div>
        <div class="item features-image сol-12 col-md-6 col-lg-{{cardsWidth}}">
                <div class="item-wrapper">
                    <div class="item-img">
                        <img src="../_images/vertical/bistroVertical2.jpg" data-slide-to="1" data-bs-slide-to="1" alt="">
                    </div>
                </div>
            </div>
            <div class="item features-image сol-12 col-md-6 col-lg-{{cardsWidth}}">
                <div class="item-wrapper">
                    <div class="item-img">
                        <img src="../_images/vertical/bistroVertical7.jpg" alt="" data-slide-to="2" data-bs-slide-to="2">
                    </div>
                </div>
            </div><div class="item features-image сol-12 col-md-6 col-lg-{{cardsWidth}}">
                <div class="item-wrapper">
                    <div class="item-img">
                        <img src="../_images/vertical/bistroVertical1.jpg" alt="" data-slide-to="3" data-bs-slide-to="3">
                    </div>
                </div>
            </div>
            
            
            
        </div>
    </div>
</section>

[Tommy Herrmann]

Moin,

da ist doch normalerweise in den Block-Werkzeugen (Zahnrad) ein Schieberegler für den Zwischenraum.

Das muss irgendwo in der CSS stehen (nicht in dem HTML-Code, den Du hier postest).

Am besten Du beschreibst mal das Thema das Du verwendest und den Block (am besten Screenshot), dann kann man mal nachgucken.

Ein Link (URL) zur Seite würde es wahrscheinlich auch schon tun, da man dann in den Quellcode gucken kann ...

[inno]

Hallo Tommy,

steht doch oben in Klammern in der Headline (BistroM5) und der Block ist auch aus dem BistroM5!

[inno]

... beim Zahnrad kann man die Abstände zwischen den Bildern nicht anpassen! Gruß

[Tommy Herrmann]

Ich habe nochmals gesucht...

Diese Class in der Themen-Datei "style.css" bestimmt den Abstand links und rechts an den Bildern und steht jetzt auf 16px:

Code: Alles auswählen

.row > [class*=col] {
  padding-left: 16px;
  padding-right: 16px;
}

Da es sich hier um einen Selektor mit einem Attribut-Wert handelt, solltest Du diesen jeweils nur in dem verwendeten Block umsetzen, denn sonst ändern sich alle Blöcke von diesem Thema mit dieser Bedingung.

Ich habe also diese Class nun erneut in den "CSS Editor" vom Block mit diesen Bildern eingefügt und den Abstand mal auf 10px verringert (links und rechts jeweils 5px Innenabstand), siehe Screenshot:

Code: Alles auswählen

.row > [class*=col] {
  padding-left: 5px;
  padding-right: 5px;
}

Das sieht dann so aus:

Hier habe ich das mal mit diesem CSS [attribute*=value] Selector beispielhaft angwendet:

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

[inno]

Hallo Tommy, das funktioniert. Leider verkleinern sich die Abstände auch zum linken und rechten Bildschirmrand, die sollte aber so bleiben, sonst passt es mit den Abständen der anderen Blocks nicht mehr zusammen. hast du evtl. noch eine Idee?

[Tommy Herrmann]

ja - dann schreibe doch direkt an das linke Bild an die class="item-img" noch eine eigene Class hinzu. Ich habe das auf meiner Seite jetzt auch mal so gemacht:

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

Ich habe das hier mit eine Media-Anweisung verbunden, sodass diese Class erst ab einer Display-Größe von 992px Breite wirkt (ab dann stehen die 4 Bilder erst nebeneinander), sonst sieht das am Handy oder Tablet falsch aus, wenn dort das erste und das letzte Bild andere Abstände haben.

Code: Alles auswählen

@media (min-width: 992px) {
  .abstand-bild-links {
    padding-left: 16px;
  }
  .abstand-bild-rechts {
    padding-right: 16px;
  }
}

Dann änderst Du diese Class:

<div class="item-img">

... am linken Bild so, fügst also die class="abstand-bild-links" noch hinzu:

<div class="item-img abstand-bild-links">

und an das rechte Bild eben auch:

<div class="item-img abstand-bild-rechts">

[inno]

Klasse! Ich danke dir sehr!!!

[inno]

Könntest du mir den Code für die Class (class="item-img" noch eine eigene Class) noch schicken, ich bekomme das nicht hin! Danke dir!

[Tommy Herrmann]

Die class="item-img" steht doch im Block an jedem Bild - oder was meinst Du

Kannst Du auch in meinem Screenshot oben (neben meiner markierten Class) im "HTML Editor" erkennen.

... und mein CSS-Code (meine Class) für den Abstand links und rechts habe ich doch in meinem letzten Beitrag gepostet.

Du erweiterst also die vorhandene Class:

Code: Alles auswählen

<div class="item-img">

am linken Bild mit meiner Class "abstand-bild-links":

Code: Alles auswählen

<div class="item-img abstand-bild-links">

und am rechten Bild mit meiner Class "abstand-bild-rechts":

Code: Alles auswählen

<div class="item-img abstand-bild-rechts">

Man kann beliebig viele CSS Definitionen als eine Class zusammenschreiben, mit Leerzeichen dazwischen.

[inno]

... hatte ich vergessen! So, jetzt passt es! Vielen Dank nochmal!

[inno]

... jetzt passen die Abstände links und rechts in der Mobilansicht zu den anderen Blöcken nicht mehr.
Kann ich das auch einstellen? Sorry!

[Tommy Herrmann]

Du - ich kann da nichts zu sagen, solange ich nicht Deine Seite sehe.

Es gibt doch ganz unterschiedliche Blöcke im Thema "BistroM5" - auch kann man viele Blöcke anders einstellen, woher soll ich jetzt wissen welchen Block oder Blöcke Du meinst?

Das es in der mobilen Ansicht nicht mehr passt ist doch klar, da gilt dann eben der neu definierte Zwischenraum der Bilder des Blocks.

Deswegen hat ja Mobirise auch diese "globale" Abstands-Definition erstellt, sodass es eben bei allen Blöcken gleich ist.

Wenn Du das für nur einen Block änderst, dann muss dieser Block ja andere Abstände haben.

[Tommy Herrmann]

Du könntest höchstens eben diese Änderung nur ab 998px Breite vornehmen ...

... ich gucke mal.

[Tommy Herrmann]

Du kannst das einfach alles in der CSS zusammenfassen, also so:

Code: Alles auswählen

@media (min-width: 992px) {
  .row > [class*=col] {
    padding-left: 5px;
    padding-right: 5px;
  }
  .abstand-bild-links {
    padding-left: 16px;
  }
  .abstand-bild-rechts {
    padding-right: 16px;
  }
}

Hier auch geändert wie beschrieben:

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

[inno]

Funktioniert! Besten Dank!!!!!