Seite 1 von 1
Headline Abstand oben wie Head 2
Verfasst: Mo 26. Jul 2021, 14:59
von inno
Hallo, und gleich noch eine Frage.
Kann HEAD 1 auf die gleiche Höhe wie Head 2 setzen (siehe Screenshot). Mit "padding-top" war es leider nicht möglich.
Das ist ein Block aus dem ART M4 Theme.
Danke schon mal für die Hilfe.
Viele Grüße
Re: Headline Abstand oben wie Head 2
Verfasst: Mo 26. Jul 2021, 15:40
von Tommy Herrmann
Moin,
ich habe heute wahrscheinlich nicht mehr genügend Zeit um das zu prüfen und kenne diesen Block bisher auch noch nicht.
Das sieht mir aber eher so aus, als währe "Head1" bei diesem Block als der "Title" - die Überschrift - gedacht und das sitzt dann in einem anderen <div> als die 3 anderen Felder, die ja nach einer "Card-Box" aussehen. Du würdest dann mit einem "padding-top" wahrscheinlich alles nach unten schieben.
Die Bootstrap "Cards" sind relativ kompliziert aufgebaut und das kann man nicht mal so auf die Schnelle abändern.
https://getbootstrap.com/docs/4.0/components/card/
https://getbootstrap.com/docs/4.0/compo ... ard-groups
Kannst Du die Überschrift "Head1" in den Block-Werkzeugen nicht einfach ausschalten?
Grundsätzlich sollte man sich Blöcke aussuchen, die schon von Anfang an besser ins Konzept passen und diese dann nicht unnötig und komplett umbauen. Das kann auch zu großen Problemen bei Updates der Themen führen.
Du kannst doch für "ArtM4" jeden beliebigen Block aus Tausenden von Blöcken anderer Themen verwenden.
Re: Headline Abstand oben wie Head 2
Verfasst: Mo 26. Jul 2021, 16:08
von inno
... ich weiss! Dieser Block passt aber am besten zum Design!
Hab mir schon gedacht, dass es komplizierter ist. Mit "padding-top" schiebe ich alles nach unten.
Vielleicht hast du ja später noch eine Lösung.
Danke aber schon mal!
Re: Headline Abstand oben wie Head 2
Verfasst: Mo 26. Jul 2021, 16:45
von Tommy Herrmann
... ich habe mal noch auf die Schnelle diese Lösung hier:
https://www.mobirise-tutorials.com/ArtM4/
Du findest diesen Block mit grauem Hintergrund gleich unter dem Block "Features" (mit den Pinseln).
> Ich habe den "Title" in den Block-Werkzeugen ausgeschaltet
> Ich habe dazu die "Cards" im "Code Editor" oben bei den Optionen von 3 auf
4 erhöht:
Code-Änderung hat geschrieben:
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected>4</option>
> Dann habe ich eine Option (die letzte) hinzugefügt, indem ich diejenige zuvor kopiert habe und
cards-amount > 3 gesetzt habe:
> und dann bei der ersten Option alle Texte händisch entfernt und "Titel" hin geschrieben. Diesem eine andere Größe geben ("display-5") und im äußeren <div> die linke Border (Linie) entfernt style="border-style:none;" die ja ansonsten mit der
class="card" an allen Cards sitzt:
Code: Alles auswählen
<div style="border-style:none;" class="card col-12 col-md-6 col-lg-3 md-pb">
<div class="card-wrapper">
<div class="card-box align-left">
<h5 class="card-title mbr-fonts-style" mbr-theme-style="display-5" mbr-if="showTitle" data-app-selector=".card-title, .iconfont-wrapper"><b>Titel</b></h5>
<p class="card-text mbr-fonts-style pb-3" mbr-theme-style="display-7" mbr-if="showText" data-app-selector=".card-text"> </p>
<div class="link-wrapper" mbr-if="showLink">
</div>
</div>
</div>
</div>
... unten meine "Code Änderungen" aus dem Cod oben nochmals
gelb markiert, damit Du es leichter findest:
Code-Änderung hat geschrieben:
<div
style="border-style:none;" class="card col-12 col-md-6 col-lg-3 md-pb">
<div class="card-wrapper">
<div class="card-box align-left">
<h5 class="card-title mbr-fonts-style" mbr-theme-style="
display-5" mbr-if="showTitle" data-app-selector=".card-title, .iconfont-wrapper"><b>
Titel</b></h5>
<p class="card-text mbr-fonts-style pb-3" mbr-theme-style="display-7" mbr-if="showText" data-app-selector=".card-text">
</p>
<div class="link-wrapper" mbr-if="showLink">
</div>
</div>
</div>
</div>
Re: Headline Abstand oben wie Head 2
Verfasst: Mo 26. Jul 2021, 17:10
von inno
Versuche ich später gleich! Aber schon mal KLASSE!!!!!!!
Vielen Dank!!!!!
Re: Headline Abstand oben wie Head 2
Verfasst: Mo 26. Jul 2021, 17:12
von Tommy Herrmann
Wenn Du auch noch volle Breite (wie bei meinem Block darunter) haben möchtest kannst Du noch das "Padding" (Außenabstand) von der
class="card" entfernen oder eben einen anderen Abstand als 4rem (links und rechts) geben:
padding: 0 4rem;
Code: Alles auswählen
.card {
border-left: 1px solid @borderColor;
border-radius: 0;
padding: 0 4rem;
@media (max-width: 1200px) {
padding: 0 1rem;
}
@media (max-width: 992px) {
padding-left: 1rem;
border-left: 0px;
}
}
das wirkt sich dann aber auf
jede der 4 Cards aus.
Re: Headline Abstand oben wie Head 2
Verfasst: Di 27. Jul 2021, 17:02
von inno
Funktioniert einwandfrei!!! Vielen Dank!!!!
Re: Headline Abstand oben wie Head 2
Verfasst: Di 27. Jul 2021, 17:14
von Tommy Herrmann
Hallo,
danke für die Rückmeldung
... das ist dann aber schon etwas "fummelig" - schön, dass Du es dennoch hin bekommen hast