Darstellung Bild auf Smartphone

Allgemeine Fragen
scherenschlag
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 257
Registriert: Di 15. Dez 2020, 11:46
Wohnort: Dortmund

Darstellung Bild auf Smartphone

Ungelesener Beitrag von scherenschlag »

Moin.
Ich bin mal wieder ein bisschen verwirrt.
Diesen Block mit Image habe ich eingefügt:
https://tsad17.de/BSV2022/datenschutz.html#Datenschutz
Mit unserem Logo.
Und habe lediglich diesen HTML Eintrag geändert:

Code: Alles auswählen

 <input type="range" inline name="imageWidth" title="Image" min="1" max="7" step="1" value="1">
Und zwar von min=4 auf min=1.
Grund: Mir war das Logo (links weiter unten im Block) mit der alten Einstellung zu groß auf dem PC. PC also so wie ich es gerne haben wollte. Wenn ich mir nun die Seite auf dem Smartphone anschaue, ist das Logo sehr groß.
Aber an den Media Anweisungen im CSS habe ich ja nichts geändert. Warum ist dass so?
:confused:
scherenschlag
MBR 5.9.17
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5964
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Darstellung Bild auf Smartphone

Ungelesener Beitrag von Tommy Herrmann »

Moin,

Du - bei diesem Mobirise-Block (es wäre immer gut den Block ganz genau zu benennen, am besten mit Screenshot, damit man das hier nachsehen kann) wird die Breite offensichtlich mit dieser CSS-Class bestimmt:

Code: Alles auswählen

.w-100 {
  width: 100% !important;
}

<img class="w-100" src="assets/images/bsvlogo250farbe-252x252.png" alt="BSV Logo">


Die "100" steht dabei für 100% des verfügbaren Platzes.

Am Handy bricht nun aber das <div> mit dem Text um und dadurch bekommt das Bild den gesamten Platz der Display-Breite am Handy zugewiesen - eben immer noch 100%.

Wahrscheinlich kannst Du das mit einer Media-Anweisung lösen, indem Du diese zusätzlich in den Bereich "CSS Editor" schreibst und der Class im Fall eines Displays bis maximal 768 Pixel Breite dann z.B. nur 50% Breite gibst:

Code: Alles auswählen

@media (max-width: 768px) {
  .w-100 {
    width: 50% !important;
  }
}

Was Du da oben geändert hast, ist doch ein Block-Parameter, der wahrscheinlich die Schritte eines Schiebereglers bestimmt.

Das erkennt man doch sogleich an diesem Eingabefeld "input":

Code: Alles auswählen

input type="range"
Das bestimmt nur die Größe im Block am Desktop die Du damit über einen Regler in den Block-Werkzeugen (Zahnrad) einstellen kannst und das hat mit der eigentlichen CSS nichts zu tun.

Also in Schritten von "1" gibt es einen Regler, der von 1 bis 7 die Größe des Bildes angibt. Diese Größe stand dann vorher offensichtlich auf 4.
scherenschlag
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 257
Registriert: Di 15. Dez 2020, 11:46
Wohnort: Dortmund

Re: Darstellung Bild auf Smartphone

Ungelesener Beitrag von scherenschlag »

Danke Tommy.
Habe ich auf die schnelle mal ausprobiert. Jetzt sieht es so aus wie ich mir das vorgestellt habe.
Das hatte ich gar nicht auf dem Schirm. Nur jetzt mal eine dumme Frage hinterher:
Muss ich das bei 992 px und 425 px auch machen?
Danke für die Erklärung..... :tu:
scherenschlag
MBR 5.9.17
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5964
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Darstellung Bild auf Smartphone

Ungelesener Beitrag von Tommy Herrmann »

... na was heißt "musst" :eek:

Du kannst doch machen was Du für schön empfindest. Ab 769 Pixeln Breite sitzt das Logo jetzt wieder neben dem Text, allerdings sehr klein (weil es eben auf "1" steht).

Schiebe doch mal am Desktop einfach Dein Browser-Fenster langsam zusammen und dann siehst Du was wann passiert.

Die offiziellen Break-Points (Umbrüche) sind bei Bootstrap:

https://getbootstrap.com/docs/5.0/layout/breakpoints/
Antworten

Wer ist online?

Mitglieder in diesem Forum: Ahrefs [Bot], Bing [Bot] und 1 Gast