@phranck Eine Möglichkeit ist .elternelement { display: gird; grid-template-columns: 35% 65%; } - Das funktioniert dann auch nur mit zwei Spalten (Columns). Es ginge auch grid-template-columns: 35% 1fr - So ist die erste Spalte immer 35% breit und die zweite nimmt so viel Platz ein, wie verfügbar. 1fr = 1 Fraction. - Hoffe, das hilft etwas. Sonst schau mal hier vorbei: https://css-tricks.com/snippets/css/complete-guide-grid/
@phranck Allgemein für einen Elterncontainer, in dem zwei Kind-Elemente sind, die 35%/65% zueinander stehen. Möchtest Du zB drei Kind-Elemente haben, könnte es so aussehen: .elternelement { display: grid; grid-template-colums: 20% 70% 10%;} In dem Fall hätte man drei Spalten, eine 20% vom Elternelement, eine 70% und eine 10%.
@hirsebirse Sorry, das ist mir zu heavy. Das ist ein fertiges Template. Heisst, das ganze CSS gibt es bereits. Ich kann da in Publii lediglich überschreiben.
@phranck Ey, ich habe es mir eben mal auf Deiner Seite angeschaut. Da wird noch viel altes CSS benutzt. Heutzutage benutzt man zB nicht mehr float. Dein Theme benutzt das aber noch. Dadurch komme ich nicht mit meinem CSS gegen an. Ich nehme an, Du bekommst in einem Editor innerhalb von Publii das gesamte CSS des Themas angezeigt und kannst dann nur reinschreiben?
@hirsebirse Nein, ich bekomme einen leeren Editor, in dem ich dann CSS ueberschreiben kann. Was genau das sein kann, das ermittle ich mir mit den Browser eigenen Debug-Tools.
@hirsebirse Da gibt es noch jede Menge @media all and ... Statements fuer die CSS Klassen main__left und main__right. Die beeinflussen die jeweilige Breite ja auch noch.
@phranck Schau mal: https://github.com/NilsC/phranck/blob/main/main.css Die meisten @media (Mediaqueries, die besagen, ab welcher Bildschirmbreite welches CSS greifen soll), sind für Kindselemente von .main__left und .main__right - die ignorieren wir erst einmal. Mir ist aufgefallen, dass Du - auch wenn es nicht schön ist - das <footer<-Element ans Ende des .main__right verschieben müsstest. Sonst ist das "Made with <3" außerhalb des Layouts.
@hirsebirse So, hab alles nochmal loeschen muessen. Die Aufteilung funktioniert. Allerdings stimmt der Mobile-Part noch nicht. Und der Content eines Posts steht unter der linken Seite, und die linke Seite scrollt jetzt mit… 😃🙈
@hirsebirse Ich hab das originale Template wieder restored. Im Prinzip funktioniert das ja auch. Nur, dass das Verhaeltnis ab einer bestimmten Fenstergroesse dann immer 50:50 ist, und nicht 40:60 bleibt.
@phranck Ah. Okay. Fall es Dich interessiert: Ab Zeile 783 steht dies: @media all and (min-width: 56.25em) {
.main__left {
height: 100vh;
position: fixed;
top: 0;
width: 30vw;
}
} @media all and (min-width: 112.5em) {
.main__left {
width: 40vw;
}
}
Soll heißen, ab 900px Breite ist der linke Teil 30% Breit. Das geht bis 1799 Pixel. Ab 1800px ist der linke Teil 40% breit. Mobile sollten links und rechts untereinander stehen.
@hirsebirse Das deckt sich irgendwie nicht mit meiner Beobachtung. Ab 1799 springt es hier auf 50:50. Vorher ist es immer 40:60. Ausser ganz schmal (mobile), da ist es einspaltig.
Add comment