Abstands-Problem zwischen den Blöcken

[inno]

Hallo Tommy, ich habe hier ein Abstandsproblem zwischen den Blöcken (siehe Screen).
Obwohl das Spacing TOP in den Einstellungen (Zahnrad) auf 0 steht habe ich zwischen den oberen und unteren Bild einen grossen Abstand. Der sollte aber nur so gross sein wie zwischen den Bildern. Habe schon einiges versucht, leider ohne Erfolg. Vielleicht hast du eine Idee.

Code HTML:

Code: Alles auswählen

<section data-bs-version="5.1" class="features6" group="Features">
    <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="0">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="0">
        <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>
        <header>Show/Hide</header>
        <input type="checkbox" name="showTitle" title="Title">
        <input type="checkbox" name="showSubtitle" title="Subtitle">
        <header>Cards</header>
        <input type="checkbox" name="autoSize" title="Custom Height" checked>
        <input type="range" name="imageHeight" title="Height" min="1" max="8" step="1" value="6" condition="autoSize && !(showButtons==false && showCardSubtitle==false && showCardTitle==false && showText==false)">
        <input type="checkbox" title="Spacing" name="spacing" checked>
        <input type="checkbox" name="showCardTitle" title="Title">
        <input type="checkbox" name="showCardSubtitle" title="Subtitle">
        <input type="checkbox" name="showText" title="Text">
        <input type="checkbox" name="showButtons" title="Buttons">
        <input type="color" name="cardsBg" title="BG" value="#ffffff">
        <header>Background</header>
        <fieldset type="background" name="bg" required>
            <input type="image" title="Image" value="file:///C:/Users/pc/AppData/Local/Mobirise.com/Mobirise/projects/project-2022-01-24_131846/assets/images/background2.jpg">
            <input type="color" title="Color" value="#ffffff" selected>
        </fieldset>
        <input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'" checked>
        <input type="color" title="Overlay Color" name="overlayColor" value="#fafafa" condition="overlay && bg.type == 'image'">
        <input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.1" condition="overlay && bg.type == 'image'">
    </mbr-parameters>
    <div class="mbr-overlay" mbr-if="overlay && bg.type !== 'color'"></div>
    <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
        <div class="mbr-section-head pb-4" mbr-if="showTitle || showSubtitle">
            <h4 class="mbr-section-title mbr-fonts-style align-left mb-0" mbr-theme-style="display-2" mbr-if="showTitle" data-app-selector=".mbr-section-title"><b>Portfolio</b></h4>
            <h5 class="mbr-section-subtitle mbr-fonts-style align-center mb-0 mt-2" mbr-theme-style="display-5" mbr-if="showSubtitle" data-app-selector=".mbr-section-subtitle">To add more cards, hover on a card and
                click 'Add items'</h5>
        </div>
        <div class="row mt-4">
            <div class="item features-image сol-12 col-md-6 col-lg-{{cardsWidth}}">
                <div class="item-wrapper">
                    <div class="item-img abstand-bild-links">
                        <img src="file:///C:/Users/pc/AppData/Local/Mobirise.com/Mobirise/projects/project-2022-01-24_131846/assets/images/dummy500.jpg" alt>
                    </div>
                    <div class="item-content" mbr-if="showCardTitle || showCardSubtitle || showText || showButtons">
                        <h5 class="item-title mbr-fonts-style" mbr-theme-style="display-4" data-app-selector=".item-title" mbr-if="showCardTitle">Portfolio</h5>
                        <h6 class="item-subtitle mbr-fonts-style" mbr-theme-style="display-5" data-app-selector=".item-subtitle" mbr-if="showCardSubtitle"><b>VERKAUFSOFFENER SONNTAG</b></h6>
                        <p class="mbr-text mbr-fonts-style mt-3" mbr-if="showText" mbr-theme-style="display-7" data-app-selector=".mbr-text, .mbr-section-btn">03.04.2022 I 17 Uhr</p>
                    </div>
                    <div class="mbr-section-btn item-footer mt-2" mbr-if="showButtons" data-toolbar="-mbrBtnMove,-mbrBtnAdd" mbr-buttons mbr-theme-style="display-7"><a href class="btn btn-primary item-btn" target="_blank" data-app-placeholder="Type Text">Learn More
                            &gt;</a></div>
                </div>
            </div>
            <div class="item features-image сol-12 col-md-6 col-lg-{{cardsWidth}}" mbr-if="cardsWidth < 7">
                <div class="item-wrapper">
                    <div class="item-img">
                        <img src="file:///C:/Users/pc/AppData/Local/Mobirise.com/Mobirise/projects/project-2022-01-24_131846/assets/images/dummy500.jpg" alt>
                    </div>
                    <div class="item-content" mbr-if="showCardTitle || showCardSubtitle || showText || showButtons">
                        <h5 class="item-title mbr-fonts-style" mbr-theme-style="display-4" data-app-selector=".item-title" mbr-if="showCardTitle">Portfolio</h5>
                        <h6 class="item-subtitle mbr-fonts-style" mbr-theme-style="display-5" data-app-selector=".item-subtitle" mbr-if="showCardSubtitle"><b>ANTIK &amp; TRÖDELMARKT</b></h6>
                        <p class="mbr-text mbr-fonts-style mt-3" mbr-if="showText" mbr-theme-style="display-7" data-app-selector=".mbr-text, .mbr-section-btn">01.05.2022 I 10-18 Uhr</p>
                    </div>
                    <div class="mbr-section-btn item-footer mt-2" mbr-if="showButtons" data-toolbar="-mbrBtnMove,-mbrBtnAdd" mbr-buttons mbr-theme-style="display-7"><a href class="btn btn-primary item-btn" target="_blank" data-app-placeholder="Type Text">Learn More
                            &gt;</a></div>
                </div>
            </div>
            
              <div class="item features-image сol-12 col-md-6 col-lg-{{cardsWidth}}" mbr-if="cardsWidth < 4">
                <div class="item-wrapper">
                    <div class="item-img">
                        <img src="file:///C:/Users/pc/AppData/Local/Mobirise.com/Mobirise/projects/project-2022-01-24_131846/assets/images/dummy500.jpg" alt>
                    </div>
                    <div class="item-content" mbr-if="showCardTitle || showCardSubtitle || showText || showButtons">
                        <h5 class="item-title mbr-fonts-style" mbr-theme-style="display-4" data-app-selector=".item-title" mbr-if="showCardTitle">Portfolio</h5>
                        <h6 class="item-subtitle mbr-fonts-style" mbr-theme-style="display-5" data-app-selector=".item-subtitle" mbr-if="showCardSubtitle">
                            Analysis
                        </h6>
                        <p class="mbr-text mbr-fonts-style mt-3" mbr-if="showText" mbr-theme-style="display-7" data-app-selector=".mbr-text, .mbr-section-btn">You don't have to code to create your own
                            site. Select one of available themes in the Mobirise Site Maker.</p>
                    </div>
                    <div class="mbr-section-btn item-footer mt-2" mbr-if="showButtons" data-toolbar="-mbrBtnMove,-mbrBtnAdd" mbr-buttons mbr-theme-style="display-7"><a href class="btn btn-primary item-btn" target="_blank" data-app-placeholder="Type Text">Learn More
                            &gt;</a></div>
                </div>
            </div>
            
              <div class="item features-image сol-12 col-md-6 col-lg-{{cardsWidth}}" mbr-if="cardsWidth < 6">
                <div class="item-wrapper">
                    <div class="item-img abstand-bild-rechts">
                        <img src="file:///C:/Users/pc/AppData/Local/Mobirise.com/Mobirise/projects/project-2022-01-24_131846/assets/images/dummy500.jpg" alt>
                    </div>
                    <div class="item-content" mbr-if="showCardTitle || showCardSubtitle || showText || showButtons">
                        <h5 class="item-title mbr-fonts-style" mbr-theme-style="display-4" data-app-selector=".item-title" mbr-if="showCardTitle">Portfolio</h5>
                        <h6 class="item-subtitle mbr-fonts-style" mbr-theme-style="display-5" data-app-selector=".item-subtitle" mbr-if="showCardSubtitle">
                            Analysis
                        </h6>
                        <p class="mbr-text mbr-fonts-style mt-3" mbr-if="showText" mbr-theme-style="display-7" data-app-selector=".mbr-text, .mbr-section-btn">You don't have to code to create your own
                            site. Select one of available themes in the Mobirise Site Maker.</p>
                    </div>
                    <div class="mbr-section-btn item-footer mt-2" mbr-if="showButtons" data-toolbar="-mbrBtnMove,-mbrBtnAdd" mbr-buttons mbr-theme-style="display-7"><a href class="btn btn-primary item-btn" target="_blank" data-app-placeholder="Type Text">Learn More
                            &gt;</a></div>
                </div>
            </div>
        </div>
    </div>
</section>

Code CSS:

Code: Alles auswählen

padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 0rem);
& when (@bg-type = "color") {
  background-color: @bg-value;
}
& when (@bg-type = "image") {
  background-image: url(@bg-value);
  f & when (@overlay) {
    .mbr-overlay {
      background: @overlayColor;
      opacity: @overlayOpacity;
    }
  }
}
.item-subtitle {
  color: #3c3b3d;
  a {
    font-weight: 600;
  }
}
.row {
  justify-content: space-between;
}
.item {
  cursor: pointer;
  margin-bottom: 8px;
}
.item-img {
  overflow: hidden;
  margin-bottom: 0rem;
}
img, .item-img {
  width: 100%;
  & when (@autoSize) {
    height: 100%;
    object-fit: cover;
    & when (@showCardTitle) {
      height: (@imageHeight * 100px);
      object-fit: cover;
    }
    & when (@showCardSubtitle) {
      height: (@imageHeight * 100px);
      object-fit: cover;
    }
    & when (@showText) {
      height: (@imageHeight * 100px);
      object-fit: cover;
    }
    & when (@showButtons) {
      height: (@imageHeight * 100px);
      object-fit: cover;
    }
  }
}
h5 {
  margin: 0;
}
.item:focus, span:focus {
  outline: none;
}
& when not (@spacing) {
  .row {
    margin-left: 0;
    margin-right: 0;
  }
  .item {
    padding: 0;
    margin: 0;
  }
}
.item-wrapper {
  position: relative;
  border-radius: 0px;
  background: @cardsBg;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}
.item-content {
  padding-top: 2rem;
}
.mbr-section-title {
  color: #232323;
}
.item-title {
  color: #666666;
}
.row > [class*=col] {
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 0px !important;
}
@media (min-width: 992px) {
  .abstand-bild-links {
    padding-left: 10px;
  }
  .abstand-bild-rechts {
    padding-right: 10px;
  }
}

Danke und Gruss

[Tommy Herrmann]

Hallo Inno,

... also - leider habe ich heute keine Zeit mehr da zu gucken und bin auch nicht wirklich dazu brereit.

Grundsätzlich musst Du so eine Software auch ganz anders handhaben.

Du kannst Dir nicht einen einzigen Block vornehmen und dann das gesamte Design von Mobirise und Bootstrap sozusagen "neu erfinden". Dann erstelle diesen doch gleich selbst über den "Code Editor" - das geht.

Das ist viel zu aufwändig - auch für mich oder andere Helfer hier.

Wenn Du es dennoch unbedingt machen möchtest, bräuchtest Du mehr Verständnis in HTML und CSS. Ansonsten solltest Du mal unter den mehr als 5.000 Blöcken Dir einen raus suchen, der Deinen Ideen näher kommt.

Es gibt z.B. jede Menge Blöcke, da kann man über eine Schieberegler die Abstände zwischen den Bildern ganz einfach einstellen - da wäre dann unsere ganze Arbeit von heute vollkommen überflüssig geworden, wenn Du Dir gleich einen solchen Block heraus gesucht hättest.

Solche Blöcke haben eine hoch komplizierte CSS.

Das geht schon mal mit dem umfangreichsten CSS-Framework "Bootstrap" los, das wahnsinnig viele vorgefertigte CSS-Klassen verwendet und geht dann über wochenlange Arbeit von den Programmierern von Mobirise weiter und da kann ich nicht "mal eben schnell" alles neu erfinden.

Das ist voll am Konzept von Mobirise vorbei.

Da könnte man ja viel einfacher eine Webseite gleich händisch erstellen, denn dann muss man nicht erst einmal all die bereits vorbereiteten Anweisungen finden und überschreiben.

Alle Blöcke haben grundsätzlich bestimmte voreingestellte Abstände, das ist auch teilweise unbedingt notwendig für die mobilen Ansichten, wenn man das ändert - kann das ganz schnell auch in den mobilen Ansichten schief gehen. So einfach ist es nicht. Manchmal muss man sogar ein negatives "Padding" eintragen um andere, grundlegende Klassen auszuhebeln.

Bitte suche Dir möglichst Blöcke, die zu Deinen Ideen passen, denn Du kannst ja fast alle Blöcke anderer "M5" und "M4" Themen mit dem Thema "BistroM5" kombinieren. Da ist es vollkommen unsinnig jeden Block vollkommen zu zerpflücken und alles anders als gedacht zu gestalten.

... nochmals - ich bräuchte auch zwingend eine URL (Link zu Deiner Seite) um genau zu sehen welcher Block z.B. an welchen anderen grenzt und das dann im Debugger anzusehen. Das ist entscheidend wichtig für solche Abstände. Der Code, den Du oben postest nutzt gar nicht, den gucke ich noch nicht einmal an.

[inno]

Trotzdem Danke dir für deine Mühe. Ich wollte dich damit auch nicht nerven.

[Tommy Herrmann]

Bitte verstehe mich jetzt nicht falsch ...

Du nervst ja nicht!

Ich muss aber ganz genau sehen, um welche beiden Blöcke, die da ohne Abstand aneinander sitzen sollen, es ich handelt und das "online", sonst ist eine Hilfe fast unmöglich. Fast alle Blöcke sind anders aufgebaut und da gibt es keinen allgemeinen Rat, wo man das wie einstellen muss.

[inno]

Tue ich nicht. Du hast mir sehr geholfen. Vielen Dank hierfür.
Ich schaue mal bei den anderen Blocks.

[Tommy Herrmann]

Moin,

also - ich habe jetzt nochmals geguckt und im Thema "BistroM5" finde ich gerade keinen Block, bei dem ich den Abstand ("padding") oben und auch unten nicht am Schieberegler auf "0" einstellen kann.

Wenn Du das Problem bei einem Block hast, dann müsstest Du diesen Block ganz genau benennen und einen Screenshot machen. Das kann auch schon mal ein Bug bei einem Block sein, den man dann untersuchen und gegebenenfalls als solchen auch an Mobirise melden müsste.

Im Screenshot unten ist keine Haaresbreite Luft mehr zwischen den Inhalten der beiden Blöcke. Ich habe auch nochmals extra den Block oben "grau" und den darunter "rot" eingefärbt, damit man das noch besser erkennen kann:

Es kann natürlich auch mal sein, dass der Inhalt selbst - also z.B. eine "Card" oder ein "Image" - einen eigenen Abstand definiert bekommen hat, das müsste man dann eben auch im Einzelfall prüfen. Dann nutzt einem der Innenabstand ("padding") des Blocks selbst ja nichts, dann müsste man eventuell auch noch den Abstand des Elementes des Inhalts bearbeiten.



Eine Ausnahme bildet meist die Menüleiste, bei der man keine Abstände einstellen kann, denn diese kann man sehr oft mit dem Schalter "Sticky" auch fixieren, sodass sie nicht weg scrollt.

Bei einer fixierten Menüleiste, liegt auch der oberste Block (Header) immer hinter dieser, da dann der oberste Rand der Bildschirmrand wird. Es fehlt also bei einer fixierten Menüleiste immer die Breite der Menüleiste am obersten Header-Block, bzw. wird von der Menüleiste eben verdeckt.

Die Menüleiste hat meist einen Abstand von 1rem (manchmal auch 12 Pixeln) definiert und das hat den guten Grund, dass sich die Menüleiste beim Scrollen verkleinert wenn sie fixiert ist, was sehr wichtig für die Ansicht am Handy ist, da sie dort sonst noch mehr Platz an dem kleinen Display in Anspruch nehmen würde.

Wolltest Du den Abstand dennoch verkleinern, musst Du das testen. Wahrscheinlich sitzt dann das Logo nicht mehr mittig und andere Dinge könnten falsch dargestellt werden. Dann müsstest Du auf jeden Fall sämtliche 4 Display-Größen testen, also Handy, Tablet (hochkant und quer) und Desktop auch mit allen Browsern am Desktop und allen Browser am Handy und auch an Adroid und iOS. Am iPhone wird vieles anders als am Samsung (Android) dargestellt. Das ist dann immer eine Pflichtübung.

Du könntest also das "padding" (Innenabstand) der Navi nochmals unten in den Bereich "CSS Editor" schreiben, also das rem (Root-Element em) auf Null setzen:

Code: Alles auswählen

nav.navbar {
    padding-top: 0rem;
    padding-bottom: 0rem;
}

[inno]

Danke dir. Schaue ich mir später in Ruhe an. Wie gesagt, deine Hilfe ist TOP!!!!