LMU - Das Hilfe Forum für Linux Mint

Mint Community => Linux und Co. => Thema gestartet von: 85hans am 26.03.2021, 17:07:50

Titel: HTML/CSS-Problem
Beitrag von: 85hans 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
Titel: Re: HTML/CSS-Problem
Beitrag von: moehre 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...
Titel: Re: HTML/CSS-Problem
Beitrag von: 85hans 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.
Titel: Re: HTML/CSS-Problem
Beitrag von: 85hans am 30.03.2021, 11:11:56
So, alles auf die richtige Reihe bekommen, funktioniert.
Damit erledigt!  ;D