Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Preisliste? Also text links, preis rechts?
#16
Hier hatte ich übrigens meine Variante ausprobiert:

http://www.mobirise-tutorials.com/Testse...ordion1-4u

Es gibt (natürlich) auch eine Bootstrap-Class "float-right".

Code:
<img src="http://www.mobirise-tutorials.com/Testseiten/Software-Ende/meinsteuerradklein.png" alt="Bild"> Was? <span class="float-right">0,00 EUR</span>

P.S.:

... und mein Test wird auch am Handy angezeigt :D


.jpg  Screenshot_20190729-102021_Samsung Internet.jpg (Größe: 259,8 KB / Downloads: 6)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#17
Ich mach das nochmal neu.

gerade habe ich was völlig anderes eingebaut aus Hotel M4, aber das scheint mit Mobirise4-Theme nicht kompatibel zu sein.
In der Handy-Ansicht entgleist das Bild
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#18
Hallo Stobi
falls es noch interresant sein sollte.
Habe das hier mit flexbox gelöst.

Habe es aber nicht in Mobi gemacht,weil ich es hier gerade nicht zur Verfügung hatte.
Sollte in Mobi aber genau so funktionieren.

Du brauchst nur den Teil mit dem Modal und die Styleanweisungen aus dem Headbereich in Mobi übernehmen

Mein verwendetes Bild: 
.png   Harken.png (Größe: 1,26 KB / Downloads: 84)

Hier nur der Code der in Mobi muss

Code:
<style>
#box{
display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}
img.bil{
display: flex;
    flex-direction: row;
    flex-wrap: nowrap;


}

.Text p{
display: flex;
    flex-direction: row;
    flex-wrap: nowrap;


}
</style>

<!-- HTML -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#AndyModal">
  Popup öffnen
</button>


<!-- Modal anfang -->
<div class="modal fade" id="AndyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
  aria-hidden="true">

 
  <div class="modal-dialog modal-dialog-centered" role="document">


    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Andy´s Popup</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="überschriftEins">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseEins" aria-expanded="true" aria-controls"collapseEins">
          Klappbarer Eintrag #1
        </a>
      </h4>
    </div>
    <div id="collapseEins" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="überschriftEins">
      <div class="panel-body">
<div id="box">
<div class="Bild">
<img src="./Harken.png" alt="erledigt" class="bil">
</div>
<div class="Text">
<p> € 100,-.</p>
</div>
</div>
</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="überschriftZwei">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseZwei" aria-expanded="false" aria-controls"collapseZwei">
          Klappbarer Eintrag #2
        </a>
      </h4>
    </div>
    <div id="collapseZwei" class="panel-collapse collapse" role="tabpanel" aria-labelledby="überschriftZwei">
      <div class="panel-body">
<div id="box">
<div class="Bild">
<img src="./Harken.png" alt="erledigt" class="bil">
</div>
<div class="Text">
<p> € 100,-.</p>
</div>
</div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="überschriftDrei">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseDrei" aria-expanded="false" aria-controls"collapseDrei">
          Klappbarer Eintrag #3
        </a>
      </h4>
    </div>
    <div id="collapseDrei" class="panel-collapse collapse" role="tabpanel" aria-labelledby="überschriftDrei">
      <div class="panel-body">
<div id="box">
<div class="Bild">
<img src="./Harken.png" alt="erledigt" class="bil">
</div>
<div class="Text">
<p> € 100,-.</p>
</div>
</div>
      </div>
    </div>
  </div>
</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Schliessen</button>
        <button type="button" class="btn btn-primary">Speichern</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal ende  -->
Hier eine gesamte Seite mit Modal
Code:
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Die 3 Meta-Tags oben *müssen* zuerst im head stehen; jeglicher sonstiger head-Inhalt muss *nach* diesen Tags kommen -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Vorlage mit fixiertem Footer und fixierter Navbar für Bootstrap</title>

    <!-- Das neueste kompilierte und minimierte CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optionales Theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<style>

/* Sticky footer styles
-------------------------------------------------- */



body{min-height:90vh;}
.content{height:90vh;}
.footer{height:10vh;
background-color:#ededed;}

.footer p{padding-top:5vh;}

.page-header{
margin-top:5vh;
}

#box{
display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}
img.bil{
display: flex;
    flex-direction: row;
    flex-wrap: nowrap;


}

.Text p{
display: flex;
    flex-direction: row;
    flex-wrap: nowrap;


}

</style>


  </head>

  <body>

    <!-- Fixierte Navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Navigation ein-/ausblenden</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Projekt-Titel</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Start</a></li>
            <li><a href="#ueber">Über</a></li>
            <li><a href="#kontakt">Kontakt</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown-Menü <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Aktion</a></li>
                <li><a href="#">Andere Aktion</a></li>
                <li><a href="#">Irgendwas anderes</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav-Überschrift</li>
                <li><a href="#">Abgetrennter Link</a></li>
                <li><a href="#">Noch ein abgetrennter Link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

   
    <section class="content">
<div class="inhalt">
<div class="jumbotron text-center">
  <h1>Hallo Welt!</h1>
  <p>...</p>
  <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#AndyModal">
  Popup öffnen
</button>
</div>
</div>

<!-- Modal anfang -->
<div class="modal fade" id="AndyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
  aria-hidden="true">


  <div class="modal-dialog modal-dialog-centered" role="document">


    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Andy´s Popup</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="überschriftEins">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseEins" aria-expanded="true" aria-controls"collapseEins">
          Klappbarer Eintrag #1
        </a>
      </h4>
    </div>
    <div id="collapseEins" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="überschriftEins">
      <div class="panel-body">
<div id="box">
<div class="Bild">
<img src="./Harken.png" alt="erledigt" class="bil">
</div>
<div class="Text">
<p> € 100,-.</p>
</div>
</div>
</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="überschriftZwei">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseZwei" aria-expanded="false" aria-controls"collapseZwei">
          Klappbarer Eintrag #2
        </a>
      </h4>
    </div>
    <div id="collapseZwei" class="panel-collapse collapse" role="tabpanel" aria-labelledby="überschriftZwei">
      <div class="panel-body">
<div id="box">
<div class="Bild">
<img src="./Harken.png" alt="erledigt" class="bil">
</div>
<div class="Text">
<p> € 100,-.</p>
</div>
</div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="überschriftDrei">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseDrei" aria-expanded="false" aria-controls"collapseDrei">
          Klappbarer Eintrag #3
        </a>
      </h4>
    </div>
    <div id="collapseDrei" class="panel-collapse collapse" role="tabpanel" aria-labelledby="überschriftDrei">
      <div class="panel-body">
<div id="box">
<div class="Bild">
<img src="./Harken.png" alt="erledigt" class="bil">
</div>
<div class="Text">
<p> € 100,-.</p>
</div>
</div>
      </div>
    </div>
  </div>
</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Schliessen</button>
        <button type="button" class="btn btn-primary">Speichern</button>
      </div>
    </div>
  </div>
</div>


<!-- Modal ende  -->
</section>
<footer>
<div class="footer text-center">
<p>Inhalt des Footers</p>
</div>
</footer

    <!-- Bootstrap-JavaScript
    ================================================== -->
    <!-- Am Ende des Dokuments platziert, damit Seiten schneller laden -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Das neueste kompilierte und minimierte JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#19
@Andy,

ich verstehe manchmal den Aufwand den Du betreibst nicht so ganz, denn erstens soll das nicht in ein Popup und zweitens soll der Preis rechtsbündig im Header des Akkordeons stehen (nicht im Content - genau das macht ja Probleme) und drittens ist das doch gar keine Mobirise-Seite von Dir und somit überhaupt nicht geeignet, denn sie hat eine vollkommen andere CSS als Mobirise-Seiten. Vergiss mal nicht, dass Mobirise noch ganz viele CSS-Klassen und etliche zusätzliche JavaScripts selbst in seine Seiten eingebaut hat und genau diese machen eben oft die Probleme. Du verwendest ja reines Bootstrap (und dann noch eine total veraltete Version, Mobirise verwendet aktuell Bootstrap v4.2.1 und nicht v3.3.5), was hier kein Mensch macht. Wie soll man das jetzt in eine Mobirise-Seite übernehmen - oder hattest Du das bereits getestet? :confused:
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#20
@Tommy: mach Deine Lösung mal mit einem großen Bild :D
Aus unerfindlichen Gründen wandert der preis noch oben?
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#21
Frank,

dass weiß ich doch (und das hatte ich Dir auch bereits geschrieben) - durch das "float" rutscht der Preis dann an die obere Kante der Reihe, eben an die Kante, die durch die Höhe vom Bild festgelegt wird (deswegen hatte ich weiter oben das "span" mit dem Preis mittels "margin" weiter mittig gerückt.

Da müsste via CSS eine "row" drum herum, die dann mittels Bootstrap-Class vertikal zentriert wird.

https://medium.com/wdstack/bootstrap-4-v...11448a2eff

Das habe ich aber auch noch nicht hin bekommen und mir ist dieser "Sonderwunsch" jetzt auch nicht so wichtig, dass ich da stundenlang rum machen würde, denn eigentlich hat ein großes Bild im Head eines Akkordeons nun mal nichts zu suchen. Man packt ja das Beiboot auf eine Yacht und nicht die Yacht auf das Beiboot :eek:
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#22
@Tommy
ich bin doch gerade sehr verwundert. Du hast keine Ahnung von Flexbox.
funktioniert in Mobi genauso denn alle größeren Navis von Mobi sind exakt damit erstellt.

Es ist auch völlig egal ob du es in den Header oder content anwendet funktioniert in beiden exakt gleich.

Bootstrap hat hier mit relativ wenig zu tun.

Habe ich in Mobi schon zigmal verwendet. Aber okay spiel mit float weiter rum.
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#23
Äh, sage mal - ich habe gerade in meinem letzten Beitrag einen Link zu Bootstrap-Flexbox gepostet :confused:

Du könntest nämlich ebenso 'flex' verwenden,:

Code:
<span class="sign mbr-iconfont mbri-arrow-down inactive"></span>Was ist Mobirise? <span class="d-flex flex-row-reverse">50,00 EUR</span>

... nur sitzt es dann wieder nicht mittig, sobald ein größeres Icon davor gestellt wird. So ein Bild ist in Deinem Beispiel auch gar nicht in der gleichen Reihe vorhanden.

... aber wenn Du es in Mobi schon x-mal gemacht hast, warum erstellst Du dann nicht mal ein Beispielseite mit Anleitungen, sodass man das dann auch mal nachbauen könnte. Du machst das immer nur theoretisch und dann ist das sehr schwierig für Leute, die es eben noch nie gemacht haben.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#24
Nur mal eben so zur Erklärung, warum ich diese Sonderbarkeit vor hatte:
Ich war davon ausgegangen, dass der Kunde verschiedene Bundles von seinem System anbieten will und hierzu dann auch verschiedene Bilder der einzelnen Komponenten.
Die Beschreibung und die Bilder hätte man dann aufklappen können, wenn einem der entsprechende Preis zusagt.
Wären die Bilder direkt erschienen, wäre das alles viel zu unübersichtlich geworden und Unterseiten für jedes eigene Produkt sind ebenfalls unpraktisch.

Es gibt aber wohl nur EIN Bild pro Produkt-Bundle, also ist meine ganze Idee völlig überflüssig.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#25
Hallo,
hier jetzt das fertige Produkt zum paste  and Copy
So sieht es aus
Modal mit Accordion und positioniert  per flexbox

User: Test
passwort: frei123

So wird es gemacht:

in Mobi einfaches textfeld aufziehen.

dann den <p> Inhalt löschen.
dann in den html Teil beim Code Editor folgenden Code einfügen:
Code:
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#AndyModal">
                  Popup öffnen
            </button>
   

<!-- Modal -->
<div id="AndyModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Andy´s Modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Hier das acordion</p>
          <div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btnAm" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <div id="box">
<div class="Bild">
<img src="/assets/images/Logo_AMHorseTraining.png" alt="erledigt" class="bil">
</div>
<div class="Text">
<p> € 100,-.</p>
</div>
</div>
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btnAm collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          <div id="box">
<div class="Bild">
<img src="/assets/images/Logo_AMHorseTraining.png" alt="erledigt" class="bil">
</div>
<div class="Text">
<p> € 100,-.</p>
</div>
</div>
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btnAm collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          <div id="box">
<div class="Bild">
<img src="/assets/images/Logo_AMHorseTraining.png" alt="erledigt" class="bil">
</div>
<div class="Text">
<p> € 100,-.</p>
</div>
</div>
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

dann in den CSS Teil beim Code Editor folgende Anweisungen Einfügen

Code:
#box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-around !important;
  align-items: center;
  min-width: 35em;
}
.Bild {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 1 1 auto;
}
.Text {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 1 1 auto;
}
img {
  max-width: 75px;
  height: auto;
}
@media (max-width: 999px) {
  #box {
    min-width: 40em;
  }
}
@media (max-width: 450px) {
  #box {
    min-width: 20em;
  }
}
.btnAm {
  padding: 1rem 1rem !important;
}
Ihr müsst dann natürlich noch eure eigene Grafik einsetzen !!!!!

Ergänzung:

Zitat:
nur sitzt es dann wieder nicht mittig, sobald ein größeres Icon davor gestellt wird. So ein Bild ist in Deinem Beispiel auch gar nicht in der gleichen Reihe vorhanden.

align-items: stretch setzt alle Elemente auf die gleiche Höhe, sofern sie in einer Reihe angeordnet sind. Hier darf jedoch den flex-items keine Höhe zugewiesen werden.


Nachtrag 30-07-2019:

Feintuning:
Entfernt aus dem Html die Class btn btn-link

aus dem Header <p> die class Text ebenfalls entfernen

Dann folgende CSS Einträge machen:

Code:
#box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between !important;
  align-items: center;
  max-width: 35em;
}
#box p {
    max-width: 210px;
    justify-content:flex-start;
    padding-top:9.5%;
    padding-right:0em;
  }
.Bild img {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 1 1 auto;
 
}
.Text {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex: 1 1 auto;
 
}
img {
  max-width: 75px;
  height: auto;
}
@media (max-width: 999px) {
  #box {
    min-width: 10em;
  }
  .Bild img{
    background-color:#00ffa7;

  }
  #box{
    background-color:red;
    width:13em;
  }
}
@media (max-width: 450px) {
  #box {
    width: 300px;
    background-color:blue;
  }
  #box p {
    max-width: 210px;
    justify-content:flex-start;
    padding-top:8.5%;
    padding-right:1em;
  }
  .btnAm {
  padding: 1rem 1rem !important;
  width: 2em !important;
}
}

@media (max-width: 375px) {
  #box {
    max-width: 100px;
    background-color:#8bff00;

  }
#box p {
    max-width: 210px;
    justify-content:flex-start;
    padding-top:7.5%;
    padding-right:2em;
  }
  .Bild {
    border:solid black;
    padding:0 !important;
    margin:0 !important;
  }
  button.btnAm {
  padding: 0rem 0rem !important;
  max-width: 100px !important;
}
}
button.btnAm {
  padding: 1rem 1rem !important;
  min-width: 13.8em ;
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#26
Oha !!!
thumbs up
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#27
Andy,

vielen Dank für Deine Mühe und den Einsatz.

Vielleicht reicht das ja so schon, allerdings sitzt auch bei Dir eben der Preis noch nicht vertikal mittig, sondern oben. Siehe Screenshot:


.jpg  Position.jpg (Größe: 885,5 KB / Downloads: 7)


Bei der kleinen Schrift fällt es nicht so schnell auf.

Das Problem ist dennoch da - ich habe es eben auch noch nicht gelöst bekommen, egal ob "flex" oder "float". Ich bin aber sicher, dass es eine Lösung gibt.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#28
Wir sollten den Ansatz aus dem Mobi-Forum nicht vergessen, nur da verschwindet der Preis in der Handy ansicht.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#29
ja - das ist auch trickreich, der hat das mit:

Zitat:<div class="d-flex justify-content-between">...</div>

gemacht:

https://getbootstrap.com/docs/4.0/utilities/flex/

Das teilt dann den Akkordeon-Header in 2 gleich große Bereiche ein. Am Handy kann das alles verdammt eng werden.

In meinem Beispiel jetzt mal ganz unten:

http://www.mobirise-tutorials.com/Testse...clone.html

Code:
                        <div class="card-header" role="tab" id="headingOne">
                            <!--<a role="button" class="panel-title collapsed text-black" data-toggle="collapse" data-core href="#collapse1" aria-expanded="false" aria-controls="collapse1">-->
                            <a role="button" class="w-100 d-inline-flex justify-content-between align-items-center collapsed panel-title text-black" data-toggle="collapse" data-core href="#collapse1" aria-expanded="false" aria-controls="collapse1">                           
                                <h4 class=" mbr-fonts-style" mbr-theme-style="display-5">
                                    <!--<span class="sign mbr-iconfont mbri-arrow-down inactive"></span>-->
                                    <img src="http://www.mobirise-tutorials.com/Testseiten/Software-Ende/assets/images/logo-mobirise-122x122.png" alt="Bild"> Was ist Mobirise?
                                </h4>
                                <h4 style="white-space:nowrap;" class="border-0 mbr-fonts-style" mbr-theme-style="display-5">
                                    0,00 EUR
                                </h4>                               
                            </a>
                        </div>


CSS:

Code:
img {
  max-width: 90%;
}
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Links können nicht gesetzt werden harfenklang 9 124 05.03.2020, 12:03
Letzter Beitrag: Tommy Herrmann
  Mobirise-Footer Links klappen nicht auf Thomas Saake 3 183 17.12.2019, 16:22
Letzter Beitrag: Thomas Saake
Photo Site style-Einstellung für Buttons und Links Goldschwalbe 4 140 16.12.2019, 16:20
Letzter Beitrag: Goldschwalbe
  Mobirise-Animierten Text nach unten verschieben Thomas Saake 6 253 30.11.2019, 12:47
Letzter Beitrag: Thomas Saake
  Laufschrift-Text in Mobirise MBR-Parameter Goldschwalbe 8 312 02.11.2019, 07:36
Letzter Beitrag: Goldschwalbe
  oberer Text wird am Handy verschluckt nof15us 3 190 21.10.2019, 16:03
Letzter Beitrag: nof15us
  Box rechts anzeigen? stobi_de 1 153 24.09.2019, 05:37
Letzter Beitrag: Tommy Herrmann
  links immer in der selben farbe Utz29 6 313 20.09.2019, 19:07
Letzter Beitrag: Utz29
  Suchbegriffe in Links? stobi_de 1 224 27.07.2019, 12:42
Letzter Beitrag: Tommy Herrmann
  Mobrise-Anordnung eines Bildes vor den Text Thomas Saake 4 334 26.07.2019, 10:21
Letzter Beitrag: Thomas Saake



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!