Media Anweisung

[struggle]

Hallo,

ich habe im CSS-Editor eine Media-Anweisung eingefügt. Sie soll für dies hier gelten:

mrdiaeinzel.PNG (6.17 KiB) 637 mal betrachtet

Code: Alles auswählen

padding-top: (@paddingTop * 15px);
padding-bottom: (@paddingBottom * 15px);
background-color: @bgColor;
.mbr-text, blockquote {
  color: #767676;
}
.mbr-text LABEL {
  color: #ffffff;
}
.mbr-text {
  text-align: center;
}
@media (max-width: 767px) {
  .display-7 {
    font-size: 0.8rem;
  }
}

Nun ist es so, daß durch die Anweisung auch der Schriftzug darüber

verkleinert wird. Das ist ja auch logisch,, da die Anweisung mit "display-7" den oberen Schriftzug auch betrifft.

Code: Alles auswählen

<div class="media-container-row">
            <div class="mbr-text col-12 col-md-8 mbr-fonts-style" mbr-theme-style="display-7" data-app-selector=".mbr-text" data-multiline mbr-article>
                <b> <label> 
<input type="checkbox" class="zoom"> 
<img src="https://www.meinlangengrassau.de/assets/images/hoellbergkarte.jpg" alt="Foto" title="Klicke mich" height="353" width="1000"><br>
                    Klicke auf die Karte zum Vergrößern
                    <br>
                    <br>
                    Daten von <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> - Veröffentlicht unter <a href="https://opendatacommons.org/licenses/odbl/" target="_blank">ODbL</a>
</label>

Was kann ich machen, daß nur der untere Schriftzug (open street map) verkleinert dargestellt wird ?

[Tommy Herrmann]

Reinhard,

mein Computer macht Probleme und startet nicht. Kann sein, dass das nun einige Tage dauert. Daher kann ich in dieser Zeit nur schwer bis gar nicht helfen.

display-7 ist zwar eine Größenangabe für die Schrift aber keine CSS-Klasse, sondern ein Mobirise Attribut.

Das geht also so nicht:

Code: Alles auswählen

@media (max-width: 767px) {
  .display-7 {
    font-size: 0.8rem;
  }
}

Erstelle Deine eigene CSS-Klasse und nenne die z.B. "mymobilsize":

Code: Alles auswählen

@media (max-width: 767px) {
  .mymobilsize {
    font-size: 0.8rem;
  }
}

Dann füge Deine class="mymobilsize" als Class noch hinzu, also dann so:

<div class="mbr-text col-12 col-md-8 mbr-fonts-style mymobilsize" mbr-theme-style="display-7" data-app-selector=".mbr-text" data-multiline mbr-article>

[struggle]

Hallo Tommy,
jetzt, wo bei Dir wieder alles geht, trau ich mich nachzufragen. Meinen Respekt noch zu Deinem "ihren Gewaltakt"
Ich habe alles so gemacht, wie Du es in Deinem letzten Beitrag beschrieben hast, es hat sich aber nichts verändert.
Mein Anliegen war, daß der Schriftzug von "Open street map" auf dem Handy verkleinert dargestellt wird.
Hast Du noch eine Idee ?

[Tommy Herrmann]

Hallo Reinhard,

bin zwar etwas älter als Du - meine Nerven habe ich aber noch gut im Griff als alter Segler

Ich muss um 17:00 weg zu Freunden und kann heute nicht mehr gucken, da ich gerade noch einen Haufen anderes Zeugs erledigen muss.

Ich gucke morgen - falls ich mich nicht gleich früh melde, erinnere mich bitte hier nochmals ...

[Tommy Herrmann]

Reinhard,

bei Fragen bitte immer den Link zu der betroffenen Seite nochmals hier posten.

Ich kann nicht jedesmal erst danach suchen, denn ohne in den Quelltext zu gucken, kann ich und andere ja nichts zu Deiner Frage sagen.

[struggle]

Ja, natürlich

https://www.meinlangengrassau.de/hoellberghof.html

Der unterste Schriftzug "Daten von Open Street Map"

[Tommy Herrmann]

... ich habe eben nochmals geguckt.

Ist doch alles richtig. Am Handy wird die Schrift verkleinert:

Hast Du den Cache am Handy gelöscht? Das ist unbedingt erforderlich - nach jeder Änderung - gerade am Handy:

> Browser Menü > Einstellungen > Persönliche Browserdaten > Browserdaten löschen

> Lasse dann nur "Zwischengesp. Bilder und Dateien" angehakt > Klicke den Button "Daten löschen"

> Schließe den Browser > starte diesen neu > rufe Deine Seite wieder auf

[struggle]

Hallo Tommy,

das ist nicht die Seite, die ich meine. Ich sollte Dir doch einen Link schicken

meine Nerven habe ich aber noch gut im Griff

hab ich gemacht, Du hast nicht geschaut !

Hier noch HMTL

Code: Alles auswählen

<section style="z-index: 1;" class="mbr-section article content1">
    
    <mbr-parameters>
    <!-- Block parameters controls (Blue "Gear" panel) -->
        <input type="range" inline title="Oben" name="paddingTop" min="0" max="8" step="1" value="0">
        <input type="range" inline title="Unten" name="paddingBottom" min="0" max="8" step="1" value="1">
        <input type="color" title="Hintergrundfarbe" name="bgColor" value="#db6400">
    <!-- End block parameters -->
    </mbr-parameters> 
    <div class="container">
        <div class="media-container-row">
           <div class="mbr-text col-12 col-md-8 mbr-fonts-style mymobilsize" mbr-theme-style="display-7" data-app-selector=".mbr-text" data-multiline mbr-article>
                <b> <label> 
<input type="checkbox" class="zoom"> 
<img src="https://www.meinlangengrassau.de/assets/images/hoellbergkarte.jpg" alt="Foto" title="Klicke mich" height="353" width="1000"><br>
                    Klicke auf die Karte zum Vergrößern
                    <br>
                    <br>
                    Daten von <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> - Veröffentlicht unter <a href="https://opendatacommons.org/licenses/odbl/" target="_blank">ODbL</a>
</label>
            </b></div><b>
        </b></div><b>
    </b></div><b>
</b></section>

und hier CSS

Code: Alles auswählen

padding-top: (@paddingTop * 15px);
padding-bottom: (@paddingBottom * 15px);
background-color: @bgColor;
.mbr-text, blockquote {
  color: #767676;
}
.mbr-text LABEL {
  color: #ffffff;
}
.mbr-text {
  text-align: center;
}
@media (max-width: 767px) {
  .mymobilsize {
    font-size: 0.8rem;
  }
}

PS: Cache lösche ich immer, bei jeder Veränderung, sowohl Handy als auch PC

[Tommy Herrmann]

... ja - hatte auf falscher Seite geguckt - aber auch auf dieser Seite ist doch alles ebenso OK und die Schrift verkleinert.

... hast ja auch alles mit der CSS-Klasse richtig gemacht.

[struggle]

Ja, der Schriftzug wird verkleinert, das war immer schon so.
Aber auch der Schriftzug darüber "klick auf die Karte......." wird verkleinert, der soll aber bitte nicht verkleinert werden.

[Tommy Herrmann]

Moin,

aha - na denn musst Du Deine class="mymobilsize" oben in der 3. Zeile vom Code (unten) entfernen, denn die gilt doch dann ab dort für den gesamten <div> Container. In dem stehen doch dann beide Texte.

So sieht der Code jetzt auf Deiner Seite aus - da stehen auch jeden Menge <strong> Tags </stong> (Fettschrift), die überhaupt keinen Inhalt haben, wozu soll das gut sein? Raus damit!

Dein jetziger Code jetzt:

Code: Alles auswählen

    <div class="container">
        <div class="media-container-row">
           <div class="mbr-text col-12 col-md-8 mbr-fonts-style mymobilsize display-7">
                <strong> <label> 
<input type="checkbox" class="zoom"> 
<img src="https://www.meinlangengrassau.de/assets/images/hoellbergkarte.jpg" alt="Foto" title="Klicke mich" height="353" width="1000"><br>
                    Klicke auf die Karte zum Vergrößern
                    <br>
                    <br>
                    Daten von <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> - Veröffentlicht unter <a href="https://opendatacommons.org/licenses/odbl/" target="_blank">ODbL</a>
</label>
            </strong></div><strong>
        </strong></div><strong>
    </strong></div><strong>
</strong> 

Ändere diesen Code so:

Hier habe ich die überflüssigen <strong> Tags </strong> (fett) gelöscht und Deine class="mymobilsize" oben im <div> entfernt und dafür in ein <span> Bereichs-Tag </span> geschrieben. So wird dann nur der Bereich, der innerhalb von diesem <span> steht, mit Deiner Class angesprochen:

<span class="mymobilsize"> Hier steht der Inhalt dieses Bereichs </span>

Mein neuer Code:

Code: Alles auswählen

    <div class="container">
        <div class="media-container-row">
           <div class="mbr-text col-12 col-md-8 mbr-fonts-style display-7">
              <strong> 
                    <label> 
                        <input type="checkbox" class="zoom"> 
                            <img src="https://www.meinlangengrassau.de/assets/images/hoellbergkarte.jpg" alt="Foto" title="Klicke mich" height="353" width="1000"><br>
                            Klicke auf die Karte zum Vergrößern
                            <br>
                            <br>
                            <span class="mymobilsize">Daten von <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> - Veröffentlicht unter <a href="https://opendatacommons.org/licenses/odbl/" target="_blank">ODbL</a></span>
                    </label>
                </strong>
            </div>
        </div>
    </div>

[struggle]

Dankeschön für Deine Bemühungen, jetzt sieht es so aus, wie ich es mir vorgestellt habe.

[Tommy Herrmann]

na bestens

Du musst Dir merken, dass eine CSS-Anweisung natürlich immer für das Tag wirkt, an dem diese steht.

Wenn Du diese also an das äußere <div> schreibst, in dem diese beiden Textzeilen stehen, dann wirkt die CSS natürlich auch auf beide Textzeilen.