Linien im Block verschieben

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

Linien im Block verschieben

Ungelesener Beitrag von scherenschlag »

Moin.
Wenn man sich den Block auf dem PC anschaut, ist der Text durch 3 weiße Linien senkrecht geteilt.
In der Mitte der Text.
Schaut man jetzt auf dem Handy sind die senkrechten Linien weg. Der Text steht in der Mitte. Klar soweit.
Kann man die die linke und rechte senkrechte Linie so anpassen, dass Sie auch auf dem Handy zu sehen ist?
Der Text also wieder in einem weißen Kasten steht.

Lasst Sinn und Zweck meines Gedankenganges erstmal beiseite. :D

https://tsad17.de/BSV2022/unterstuetzun ... sponsoring
scherenschlag
MBR 5.9.17
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Linien im Block verschieben

Ungelesener Beitrag von Tommy Herrmann »

Das mit der Borte wird in dieser CSS-Class bestimmt.

Code: Alles auswählen

.content-container {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 54px 60px;
  border-right: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
}
Am handy fehlt die Borte, dafür ist dort ein "padding" (Innenabstand) definiert.

Code: Alles auswählen

@media (max-width: 575px) {
  .content-container {
    padding: 3rem 24px;
  }
}
Versuche mal:

Code: Alles auswählen

@media (max-width: 575px) {
  .content-container {
    border-right: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
  }
}
scherenschlag
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 257
Registriert: Di 15. Dez 2020, 11:46
Wohnort: Dortmund

Re: Linien im Block verschieben

Ungelesener Beitrag von scherenschlag »

Moin.
So. Habe ich ausprobiert.
Brachte aber leider nicht gewünschte Ergebnis auf dem Phone.
Senkrechte Linien sind rechts und links nicht zu sehen.
Ist ja nicht so dass das Entscheidend wäre. Dachte nur es geht irgendwie.
Optik.......

https://www.tsad17.de/bsv2022
scherenschlag
MBR 5.9.17
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Linien im Block verschieben

Ungelesener Beitrag von Tommy Herrmann »

Hallo Thomas,

wenn Du mir das Thema und den Block mal genau benennst, würde ich vielleicht morgen mal gucken können.

... heute habe ich leider gar keine Zeit mehr.
scherenschlag
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 257
Registriert: Di 15. Dez 2020, 11:46
Wohnort: Dortmund

Re: Linien im Block verschieben

Ungelesener Beitrag von scherenschlag »

GridM5 header1-5n
scherenschlag
MBR 5.9.17
Nachtfalke
Mitglied (Level 7)
Mitglied (Level 7)
Beiträge: 67
Registriert: Mi 16. Dez 2020, 18:48
Wohnort: Main-Kinzig-Kreis, Hessen

Re: Linien im Block verschieben

Ungelesener Beitrag von Nachtfalke »

Ich glaube, du kannst mal versuchen die max-width zu verkleinern. Fange mal mit 290px an und teste das mal.

@media (max-width: 290px) {
.content-container {
border-right: 1px solid #ffffff;
border-left: 1px solid #ffffff;
}

Tommy hat aber bestimmt auch eine Idee dazu.
Mobirise v5.9.4

Gruß
Dieter
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Linien im Block verschieben

Ungelesener Beitrag von Tommy Herrmann »

Moin

@Dieter,

danke für Deine Beteiligung :tu:

... die @media Anweisung bezieht sich in der Pixelangabe ja nicht auf die Breite des Inhaltes sondern auf die Breite des Displays der verwendeten Gerätes, das hat also damit nichts zu tun.


@Thomas,

... eigentlich war mein Gedanke oben schon in die richtige Richtung, nur habe ich den Inhalt falsch gesetzt. Man sollte so etwas eben immer selbst erst mal testen, sonst macht man schnell Fehler :(

Natürlich muss die maximale Breite ("max-width") des Blocks verringert werden. Das kannst Du in Prozent (hier im Beispiel 80% der Display-Breite vom Handy) oder auch in Pixeln angeben (also z.B. 280px). Prozent ist eigentlich meist besser, da ja auch Handys unterschiedliche Display-Breiten haben.

Hier habe ich es mal im obersten Header-Block mit in die CSS eingetragen:

https://www.mobirise-tutorials.com/GridM5/


Maximale-Breite.JPG


Diese @media Anweisung schreibst Du noch ganz unten in den Bereich "CSS Editor" vom "Code Editor" dieses Blocks hinzu:

Code: Alles auswählen

@media (max-width: 767px) {
  .content-container {
    max-width: 80%;
  }
}
Du kannst das auch ebenso gut an die bereits (unten) vorhandene @media Anweisung mit ran schreiben. 575px ist nur eine kleinere, maximale Breitenangabe. Mein Handy hat im Querformat z.B. eine Breite von 726px und dann würde diese @media Anweisung von maximal 575px eben nicht mehr im Querformat wirken.

Code: Alles auswählen

@media (max-width: 575px) {
  .content-container {
    padding: 3rem 24px;
    max-width: 80%;
  }
}
Siehe auch die Breakpoints (@media Haltepunkte) für das Framework "Bootstrap 5" hier:

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



Zum Verständnis:

In der Original-CSS ist die maximale Breite der class="content-container" (Inhalt vom Container) mit 900px angegeben und die sind natürlich dann viel breiter als das Handy-Display (normlerweise ist ein Handy-Display hochkant so 360px breit), insofern konnte man dann die weiße "Border" (Borten-Linien), links und rechts an diesem Container, gar nicht mehr sehen, da dieser Container dann in seiner vollen Breite am Handy angezeigt wird:

Code: Alles auswählen

.content-container {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 54px 60px;
  border-right: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
}

P.S.:

nur wen es interessiert, denn das kann manchmal sehr nützlich sein, um mal die Display-Breite seiner Geräte zu sehen.

Ich habe auf dieser Testseite ein JavaScript eingebaut, das die Display-Breite anzeigt (unter dem Header-Block):

https://www.mobirise-tutorials.com/Test ... content7-y

Wie ich das gemacht habe, beschreibe ich hier:

viewtopic.php?t=586
scherenschlag
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 257
Registriert: Di 15. Dez 2020, 11:46
Wohnort: Dortmund

Re: Linien im Block verschieben

Ungelesener Beitrag von scherenschlag »

Nanü?????
Jetzt wollte ich gerade loslegen und deinen Tipp abarbeiten.
Und siehe da. CSS/HTML Button ist futsch. Ich kann nichts mehr einfügen.
scherenschlag
MBR 5.9.17
scherenschlag
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 257
Registriert: Di 15. Dez 2020, 11:46
Wohnort: Dortmund

Re: Linien im Block verschieben

Ungelesener Beitrag von scherenschlag »

Drag Block to Page hat auch einen Schaden...... :(
scherenschlag
MBR 5.9.17
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Linien im Block verschieben

Ungelesener Beitrag von Tommy Herrmann »

Moin,

bitte logge Dich aus der Software aus:

> Menü > Konto (account) > Ausloggen (logout)

Schließe danach die Software und starte diese neu:

> Logge Dich mit Deiner E-Mail und Deinem Passwort wieder ein.


... das hatte ich nach dem Update auf v5.5.5 (leider) auch :(
scherenschlag
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 257
Registriert: Di 15. Dez 2020, 11:46
Wohnort: Dortmund

Re: Linien im Block verschieben

Ungelesener Beitrag von scherenschlag »

Ah. Ich hatte mich nicht ausgeloggt.
Alles wieder da. :tu:
scherenschlag
MBR 5.9.17
scherenschlag
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 257
Registriert: Di 15. Dez 2020, 11:46
Wohnort: Dortmund

Re: Linien im Block verschieben

Ungelesener Beitrag von scherenschlag »

Wunderbar.
So dachte ich mir das mit der Linie auf dem Phone.

https://tsad17.de/BSV2022/unterstuetzun ... sponsoring

Danke....... :tu:
scherenschlag
MBR 5.9.17
Antworten

Wer ist online?

Mitglieder in diesem Forum: Ahrefs [Bot] und 25 Gäste