Headline Abstand oben wie Head 2

Allgemeine Fragen
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Headline Abstand oben wie Head 2

Ungelesener Beitrag 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
Dateianhänge
screen2.jpg
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Headline Abstand oben wie Head 2

Ungelesener Beitrag 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.
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Headline Abstand oben wie Head 2

Ungelesener Beitrag 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!
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Headline Abstand oben wie Head 2

Ungelesener Beitrag 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).


Geänderter Card-Block.JPG


> 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>

Parameter-Options.JPG


> Dann habe ich eine Option (die letzte) hinzugefügt, indem ich diejenige zuvor kopiert habe und cards-amount > 3 gesetzt habe:


cardsAmount groesser 3.JPG


> 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">&nbsp;</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">&nbsp;</p>
<div class="link-wrapper" mbr-if="showLink">

</div>
</div>
</div>
</div>
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Headline Abstand oben wie Head 2

Ungelesener Beitrag von inno »

Versuche ich später gleich! Aber schon mal KLASSE!!!!!!!
Vielen Dank!!!!!
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Headline Abstand oben wie Head 2

Ungelesener Beitrag 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.
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Headline Abstand oben wie Head 2

Ungelesener Beitrag von inno »

Funktioniert einwandfrei!!! Vielen Dank!!!! :tu:
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Headline Abstand oben wie Head 2

Ungelesener Beitrag 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 :tu:
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 31 Gäste