Zeilenlänge in Cards

Briddylou

Hallo,
ich habe in einer Homepage für "meine" Uni-Abteilung den Auflistungsblock "Founder Mr5" benutzt.
Das sieht so aus:
Bild

Die optionale Durchnummerierung der Karten brauche ich nicht, da das eine Präferenz für bestimmte Hotels suggerieren würde, die so nicht gemeint ist. Leider ist ohne die Nummerierung die Zeilenbreite ungünstig verteilt. Der Abstand zum Kartenrand auf der linken Seite ist okay, aber es geht rechts viel Platz verloren. Ich habe mal mit den Xen gezeigt, bis wohin eine Zeile gehen würde.
Wie kann ich erreichen, dass die Zeilen näher an den rechten Rand der Karten geschrieben werden können? Ich komm von selbst nicht drauf.

Hier der Code:
<section data-bs-version="5.1" class="content10" group="List" mbr-class="{'mbr-fullscreen': fullScreen,
'mbr-parallax-background': bg.parallax}">
<mbr-parameters>
<header>Size</header>
<input type="checkbox" title="Full Screen" name="fullScreen">
<input type="checkbox" title="Full Width" name="fullWidth" checked>
<input type="range" inline title="Top" name="paddingTop" min="0" max="10" step="1" value="5" condition="fullScreen == false">
<input type="range" inline title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="4" condition="fullScreen == false">
<input type="checkbox" title="Reverse" name="reverseContent">
<header>Show/Hide</header>
<input type="checkbox" title="Title" name="showTitle" checked>
<input type="color" title="Mark Color" name="mark" value="#99e79b" condition="showTitle" selected>
<input type="checkbox" title="Text" name="showText" checked>
<input type="checkbox" title="Buttons" name="showButtons">
<header>Cards</header>
<select title="Amount" name="cards">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected>5</option>
<option value="6">6</option>
</select>
<input type="color" title="Cards BG" name="cardsBG" value="#f4efe8" selected>
<input type="checkbox" title="Card Number" name="showNum">
<input type="color" title="Circle Color" name="circle" value="#d0dcd1" condition="showNum" selected>
<input type="checkbox" title="Card Title" name="showCardTitle" checked>
<header>Background</header>
<fieldset type="background" name="bg" parallax>
<input type="image" title="Image" value="file:///C:/Users/flede/AppData/Local/Mobirise.com/Mobirise/britta_002eleinemann_0040gmail_002ecom/addons/founderm5/components/_images/background1.jpg" parallax>
<input type="color" title="Color" value="#173d33" selected>
</fieldset>
<header condition="bg.type === 'color'">Blur</header>
<input type="color" title="Blur 1" name="blur_1" value="#fff0b0" condition="bg.type === 'color'" selected>
<input type="color" title="Blur 2" name="blur_2" value="#99e79b" condition="bg.type === 'color'" selected>
<header condition="bg.type === 'video'">Fallback Image</header>
<input type="image" title="Fallback Image" value="file:///C:/Users/flede/AppData/Local/Mobirise.com/Mobirise/britta_002eleinemann_0040gmail_002ecom/addons/founderm5/components/_images/background1.jpg" name="fallBackImage" condition="bg.type === 'video'">
<input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'" checked>
<input type="color" title="Overlay Color" name="overlayColor" value="#111111" condition="overlay && bg.type !== 'color'">
<input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.7" condition="overlay && bg.type !== 'color'">
</mbr-parameters>

<div class="mbr-fallback-image disabled" mbr-if="bg.type == 'video'"></div>
<div class="mbr-overlay" mbr-if="overlay && bg.type!== 'color'" mbr-style="{'opacity': overlayOpacity, 'background-color': overlayColor}">
</div>

<div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
<div class="row" mbr-class="{'flex-row-reverse' : reverseContent}">
<div class="col-12 col-lg-6 title">
<div class="title-wrapper">
<h2 class="mbr-section-title mbr-fonts-style" data-app-selector=".mbr-section-title, .mbr-section-btn" mbr-theme-style="display-2" mbr-if="showTitle"><b>Hotels<br>in<br>Göttingen</b></h2>
<p class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7" mbr-if="showText">Here you will find some hotels in Göttingen that are within walking distance of the venue. <br>There are more hotels further away.<br> <br>Please feel free to book the hotel that suits you best.</p>
<div mbr-buttons mbr-theme-style="display-4" class="mbr-section-btn" mbr-if="showButtons">
<a class="btn btn-info-outline" href="https://mobiri.se" data-app-placeholder="Type Text">
Start Now
</a>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card">
<div class="card-number" mbr-if="showNum">
<p class="mbr-number mbr-fonts-style" data-app-selector=".mbr-number" mbr-theme-style="display-7">
1.
</p>
</div>
<h3 class="mbr-card-title mbr-fonts-style" data-app-selector=".mbr-card-title" mbr-theme-style="display-5" mbr-if="showCardTitle">
<a href="https://www.hotel-central.com/home_de.html" class="text-secondary" target="_blank"><b>Hotel Central</b></a>     <br><font size="4em">in town center, in a quiet side street, </font><br><font size="4em">8</font><font size="4em">50 m from train station, 120 m to Wilhelmsplatz. XXXXXXXXXXXXXXXXXXXXXX</font><br><font size="4em"><b>Room contingent</b> reserved: <br></font></h3>
</div>
<div class="card" mbr-if="cards > 1">
<div class="card-number" mbr-if="showNum">
<p class="mbr-number mbr-fonts-style" data-app-selector=".mbr-number" mbr-theme-style="display-7">
2.
</p>
</div>
<h3 class="mbr-card-title mbr-fonts-style" data-app-selector=".mbr-card-title" mbr-theme-style="display-5" mbr-if="showCardTitle">
<b><a href="http://www.hotelstadthannover.de/" class="text-secondary" target="_blank"><b>Hotel Stadt Hannover</b></a> </b>  <br><font size="4em">traditional hotel between train station and city center, <br>290 m from train station, 700 m to Wilhelmsplatz. </font><br><font size="4em"><b>Room contingent</b> reserved: <br></font></h3>
</div>
<div class="card" mbr-if="cards > 2">
<div class="card-number" mbr-if="showNum">
<p class="mbr-number mbr-fonts-style" data-app-selector=".mbr-number" mbr-theme-style="display-7">
3.
</p>
</div>
<h3 class="mbr-card-title mbr-fonts-style" data-app-selector=".mbr-card-title" mbr-theme-style="display-5" mbr-if="showCardTitle"><a href="https://www.gebhardshotel.de/" class="text-secondary" target="_blank"><b>Romantik Hotel Gebhards</b></a><br><font size="4em">traditional hotel between train station and city center,<br>260 m from train station, 700 m to Wilhelmsplatz. </font><br><font size="4em"><b>Room contingent</b> reserved:  </font></h3>
</div>
<div class="card" mbr-if="cards > 3">
<div class="card-number" mbr-if="showNum">
<p class="mbr-number mbr-fonts-style" data-app-selector=".mbr-number" mbr-theme-style="display-7">
4.
</p>
</div>
<h3 class="mbr-card-title mbr-fonts-style" data-app-selector=".mbr-card-title" mbr-theme-style="display-5" mbr-if="showCardTitle"><a href="https://www.ghotel.de/hotels/goettingen/" class="text-secondary" target="_blank"><b>GHotel hotel & living</b></a><br><font size="4em">outside the city center, located on the other side of the train station<br>500 m from train station, 1,4 km to Wilhelmsplatz. </font><br><font size="4em"><b>Room contingent</b> reserved:   30 double rooms for single use.</font></h3>
</div>

<div class="card" mbr-if="cards > 4">
<div class="card-number" mbr-if="showNum">
<p class="mbr-number mbr-fonts-style" data-app-selector=".mbr-number" mbr-theme-style="display-7">
5.
</p>
</div>
<h3 class="mbr-card-title mbr-fonts-style" data-app-selector=".mbr-card-title" mbr-theme-style="display-5" mbr-if="showCardTitle"><a href="https://www.freigeist-hotels.de/de/frei ... nnenstadt/" class="text-secondary" target="_blank">H<b>otel Freigeist Göttingen Innenstadt</b></a><br><font size="4em">modern hotel on the edge of the city center,<br>260 m from train station, 900 m to Wilhelmsplatz</font><br><font size="4em"><br></font></h3>
</div>
<div class="card" mbr-if="cards > 5">
<div class="card-number" mbr-if="showNum">
<p class="mbr-number mbr-fonts-style" data-app-selector=".mbr-number" mbr-theme-style="display-7">
6.
</p>
</div>
<h3 class="mbr-card-title mbr-fonts-style" data-app-selector=".mbr-card-title" mbr-theme-style="display-5" mbr-if="showCardTitle"><a href="https://www.ghotel.de/hotels/goettingen/" class="text-secondary" target="_blank">GHotel hotel & living</a><br><font size="4em">outside the city center, located on the other side of the train station<br>500 m from train station, 1,4 km to Wilhelmsplatz</font></h3>
</div>
</div>
<div class="blur-circle"></div>
</div>
</div>
</section>

CSS:
& when not (@fullScreen) {
padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);
}
& when (@bg-type = 'color') {
background-color: @bg-value;
.row {
position: relative;
.blur-circle {
position: absolute;
top: 0;
right: 0;
width: 420px;
height: 420px;
border-radius: 100%;
background-image: linear-gradient(90deg, @blur_1 50%, @blur_2);
backdrop-filter: blur(10px);
filter: blur(64px) blur(64px);
z-index: 1;
@media (max-width: 768px) {
display: none;
}
}
}
}
& when (@bg-type = 'image') {
background-image: url(@bg-value);
}
.mbr-fallback-image.disabled {
display: none;
}
.mbr-fallback-image {
display: block;
background-size: cover;
background-position: center center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
& when (@bg-type = 'video') {
background-image: url(@fallBackImage);
}
}
& when (@fullWidth) {
.row {
padding: 0 80px;
@media (max-width: 992px) {
padding: 0 35px;
}
@media (max-width: 425px) {
padding: 0 24px;
}
}
}
.title {
display: flex;
align-items: center;
}
.title-wrapper {
position: relative;
z-index: 2;
margin-bottom: 64px;
width: 100%;
@media (max-width: 992px) {
margin-bottom: 32px;
}
.mbr-section-title {
margin-bottom: 10px;
span {
position: relative;
z-index: 1;
&::before {
content: '';
position: absolute;
bottom: 22%;
left: 0;
width: 100%;
height: 14px;
background-color: @mark;
z-index: -1;
}
}
}
.mbr-text {
margin-bottom: 0;
}
}
.card {
position: relative;
display: flex;
align-items: center;
flex-direction: row;
margin-bottom: 2rem;
padding: 16px;
border-radius: 8px;
background-color: @cardsBG;
z-index: 2;
.card-number {
display: flex;
align-items: center;
justify-content: center;
min-width: 50px;
height: 50px;
background-color: @circle;
border-radius: 100%;
margin-right: 16px;
.mbr-number {
margin-bottom: 0;
padding-top: 6px;
}
}
.mbr-card-title {
margin-bottom: 0;
width: 80%;
}
}
.mbr-section-title {
color: #f4efe8;
}
.mbr-text {
color: #f4efe8;
text-align: right;
padding-right: 2px;
}
.mbr-number {
color: #111111;
}
.mbr-card-title {
color: #111111;
text-align: left;
width: 100%;
}
.mbr-section-title, .mbr-section-btn {
text-align: right;
}

Viele Grüße und danke schonmal für Hilfe
Briddylou

Hallo,

bisher habe ich noch nicht genau verstanden, was Du erreichen willst. Willst Du den Bereich mit den Hotel-Adressen breiter haben?

Das habe ich mal hier probiert:

Hier habe ich die Beschriftung des linken Containers geändert von:

<div class="col-12 col-lg-6 title">

in:

<div class="col-12 col-lg-4 title">

… und den Container mit den Hoteleinträgen von:

<div class="col-12 col-lg-6">

in:

<div class="col-12 col-lg-8">

So werden die Hoteleinträge um 2 (von 12) Spalten breiter.

Weiterhin habe ich im "CSS Editor" dieses Blocks noch diese CSS geändert von (80px Rand links und rechts):

Code: Alles auswählen

& when (@fullWidth) {
  .row {
    padding: 0 80px;
    @media (max-width: 992px) {
      padding: 0 35px;
    }
    @media (max-width: 425px) {
      padding: 0 24px;
    }
  }

in 0px Rand links und rechts:

Code: Alles auswählen

& when (@fullWidth) {
  .row {
    padding: 0 0px;
    @media (max-width: 992px) {
      padding: 0 35px;
    }
    @media (max-width: 425px) {
      padding: 0 24px;
    }
  }

Briddylou

Nein, ich möchte die mögliche Zeilenbreite innerhalb der Cards länger haben. Die Karten zu verlängern bringt natürlich mehr Text unter, ändert aber nichts an der sehr unterschiedlichen Randbreite links und rechts.
Bild

Die mögliche Zeilenlänge endet hinter dem letzten großen X (siehe erste Karte Hotel Central). Da wäre also noch ziemlich viel Platz bis zum Ende der Karte (siehe roter Pfeil). Wie kann ich den rechten Rand innerhalb der Karte so verkleinern, dass er wie der linke ist?

So richtig fällt das bei rechtsbündiger Schrift auf. Mir erschließt sich nicht, warum der rechte Kartenrand so breit ist.
Bild

Briddylou

Hurra, ich hab die Lösung doch noch gefunden.

Und zwar habe ich den Card Title von 80 % auf 100% geändert. Manches ist so einfach, und man kommt und kommt nicht drauf.

.mbr-card-title {
margin-bottom: 0;
width: 100%;

ach so - ja - ganz einfach. Da stellst Du die Breite von

width: 80%

auf

width: 100%

Code: Alles auswählen

  .mbr-card-title {
    margin-bottom: 0;
    width: 100%;
  }

P.S.:

ups - schon selbst gefunden gehabt

Mobirise-Tutorials.com

Zeilenlänge in Cards

Zeilenlänge in Cards

Re: Zeilenlänge in Cards

Re: Zeilenlänge in Cards

Re: Zeilenlänge in Cards

Re: Zeilenlänge in Cards

Wer ist online?