Willkommen Gast. Bitte einloggen oder registrieren. Haben Sie Ihre Aktivierungs E-Mail übersehen?
13.05.2021, 13:27:56

.
Einloggen mit Benutzername, Passwort und Sitzungslänge


Autor Thema: [gelöst]  HTML/CSS-Problem  (Gelesen 294 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

[gelöst] HTML/CSS-Problem
« am: 26.03.2021, 17:07:50 »
Servus Minters,

nach meiner ersten erfolgreichen Homepage-Produktion, habe ich mich an die nächste Aufgabe gewagt: Responding!
Ja, da gibt´s noch viel zu lernen.
Aber, fast alles funktioniert inzwischen auf Handy-Screen-Size.
Nun noch das (hoffentlich) letzte übrige Problem, das ich nach vielen Versuchen bislang nicht lösen konnte:
Auf der Ausgangsseite bfindet sich eine Grafik (img) in einem <div>:
<div>
<ul id="angebot"><h2><b>Dieses Thema sollten wir deutlich tiefer analysieren.<br>Dazu grundsätzlich zwei Möglichkeiten:</b></h2>
<figure style="float: right; text-align: center; margin: 0 0 0 1rem;">
<img src="/home/hans/Homepage_final/Grafik_4b.png"
alt="Foto"
max-width="100%"
  height="auto">
</figure>

Diese Grafik ist im Handyformat zu groß und stört den Text erheblich.
Deshalb möchte ich diese Grafik beim Handyformat unterdrücken.
Das ist mir bislang nicht geglückt.

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
header, header h1, header h2, aside, header p, ul, ul p, ul h2, ul li, footer {
  flex: 1 100%;
}

@media screen and (max-width: 100em) {
body {
background-color: whitesmoke;
color: #993399;
}
}


@media all and (min-width: 35em) {
  body {
    flex: 3 1 0%;
  }

Bestimmt habt ihr eine Idee, wie ich das lösen könnte!
Besten Dank im Voraus für Lösungsvorschläge.
Hans
« Letzte Änderung: 30.03.2021, 11:12:19 von 85hans »

Re: HTML/CSS-Problem
« Antwort #1 am: 26.03.2021, 17:27:27 »
Hallo Hans,
gib der <figure> eine ID füge in die @media sowas ein:
@media screen and (max-width: 100em) {
  [was du schon hier hast]

  #figureid {
    display: none;
  }
}

Ich hab es nicht getestet, nur mal so ne Idee...

Re: HTML/CSS-Problem
« Antwort #2 am: 27.03.2021, 11:36:55 »
Danke für den Tipp.

Das funktioniert einerseits, heißt, im Handyscreen ist das Foto weg.
Aber: Auf der Originalseite (HTML) haut es mir den <div> durcheinander. Auch das Foto.

Muss noch austesten, woran das liegt.
Vermutlich falsche Reihenfolge.

Re: HTML/CSS-Problem
« Antwort #3 am: 30.03.2021, 11:11:56 »
So, alles auf die richtige Reihe bekommen, funktioniert.
Damit erledigt!  ;D