Brauche eure Hilfe bei Nav-Menü Anpassung im Firefox bei kleiner Bildschirmbreite
bearbeitet von einsiedlerLiebe Leute, bitte lasst mich nicht hängen…
Anscheinend verstehe ich das System von Flexbox (flex-grow / flex-shrink / flex-basis) hier in meinem Fall nicht. Ich habe mehrere Kombinationen ausprobiert aber nichts tut sich oder verändert sich. Ich möchte nur wenn @media screen and (max-width: 28.125em) kleiner ist, die gesamte Breite annimmt und beim schmaler werden eben ganz normal umbricht. Aber irgendetwas mir unerklärliches erzeugt die Ränder links und rechts, nur, was es ist kann ich mir nicht erklären.
~~~CSS
@media screen and (max-width: 62.500em) {
div.contentspan {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
margin: 0 0.3em; padding: 0;
border: 3px dotted green;
/* flex: 0 0 100%; */
}
.fav {
margin: 0;
padding: 0;
}
.headingspan {
align-self: flex-start;
}
header {
display: block;
margin: 0;
padding: 0.55em;
}
header img {
height: 110px;
}
#main-nav {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
max-width: 21.5em;
align-self: center;
/* flex: 1 1 100%; */
}
.main-treeitem>[aria-expanded="false"]+* {display:none !important;}
.main-treeitem>[aria-expanded="true"]+* {
margin-left: 0;
margin-top: 0.8em;
}
.treeitem>[aria-expanded="false"]+ * {display:none !important;}
}
@media screen and (max-width: 28.125em) {
header {
display: block;
margin: 0;
padding: 0.55em;
}
nav > ul ul.group,
nav > ul ul.group > li {margin:0; padding:0; display:block;}
nav > ul ul.group > li {display:flex; min-width: auto; flex-flow: column wrap;}
nav > ul ul.group > li > :nth-child(1){display:block; width:calc(100% - 3.1rem);}
nav > ul ul.group > li > :nth-child(2){display:block; width:3.1rem;}
nav > ul ul.group > li > :nth-child(3){display:block; width:100%;}
#main-nav {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
max-width: 100%;
align-self: center;
}
}
~~~
Mensch Leute, bitte helft mir…
Darum gehts: [fehlerhafte website](https://www.tassilosturm.de/)
der misanthrop
Brauche eure Hilfe bei Nav-Menü Anpassung im Firefox bei kleiner Bildschirmbreite
bearbeitet von einsiedlerLiebe Leute, bitte lasst mich nicht hängen…
Anscheinend verstehe ich das System von Flexbox (flex-grow / flex-shrink / flex-basis) hier in meinem Fall nicht. Ich habe mehrere Kombinationen ausprobiert aber nichts tut sich oder verändert sich. Ich möchte nur wenn @media screen and (max-width: 28.125em) kleiner ist, die gesamte Breite annimmt und beim schmaler werden eben ganz normal umbricht. Aber irgendetwas mir unerklärliches erzeugt die Ränder links und rechts, nur, was es ist kann ich mir nicht erklären.
~~~CSS
@media screen and (max-width: 62.500em) {
div.contentspan {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
margin: 0 0.3em; padding: 0;
border: 3px dotted green;
/* flex: 0 0 100%; */
}
.fav {
margin: 0;
padding: 0;
}
.headingspan {
align-self: flex-start;
}
header {
display: block;
margin: 0;
padding: 0.55em;
}
header img {
height: 110px;
}
#main-nav {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
max-width: 21.5em;
align-self: center;
/* flex: 1 1 100%; */
}
.main-treeitem>[aria-expanded="false"]+* {display:none !important;}
.main-treeitem>[aria-expanded="true"]+* {
margin-left: 0;
margin-top: 0.8em;
}
.treeitem>[aria-expanded="false"]+ * {display:none !important;}
}
@media screen and (max-width: 28.125em) {
header {
display: block;
margin: 0;
padding: 0.55em;
}
nav > ul ul.group,
nav > ul ul.group > li {margin:0; padding:0; display:block;}
nav > ul ul.group > li {display:flex; min-width: auto; flex-flow: column wrap;}
nav > ul ul.group > li > :nth-child(1){display:block; width:calc(100% - 3.1rem);}
nav > ul ul.group > li > :nth-child(2){display:block; width:3.1rem;}
nav > ul ul.group > li > :nth-child(3){display:block; width:100%;}
#main-nav {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
max-width: 100%;
align-self: center;
}
}
~~~
Mensch Leute, bitte helft mir…
der misanthrop
Brauche eure Hilfe bei Nav-Menü Anpassung im Firefox bei kleiner Bildschirmbreite
bearbeitet von einsiedlerLiebe Leute, bitte lasst mich nicht hängen…
Anscheinend verstehe ich das System von Flexbox (flex-grow / flex-shrink / flex-basis) hier in meinem Fall nicht. Ich habe mehrere Kombinationen ausprobiert aber nichts tut sich oder verändert sich. Ich möchte nur wenn @media screen and (max-width: 28.125em) kleiner ist, die gesamte Breite annimmt und beim schmaler werden eben ganz normal umbricht. Aber irgendetwas mir unerklärliches erzeugt die Ränder links und rechts, nur was es ist kann ich mir nicht erklären.
~~~CSS
@media screen and (max-width: 62.500em) {
div.contentspan {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
margin: 0 0.3em; padding: 0;
border: 3px dotted green;
/* flex: 0 0 100%; */
}
.fav {
margin: 0;
padding: 0;
}
.headingspan {
align-self: flex-start;
}
header {
display: block;
margin: 0;
padding: 0.55em;
}
header img {
height: 110px;
}
#main-nav {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
max-width: 21.5em;
align-self: center;
/* flex: 1 1 100%; */
}
.main-treeitem>[aria-expanded="false"]+* {display:none !important;}
.main-treeitem>[aria-expanded="true"]+* {
margin-left: 0;
margin-top: 0.8em;
}
.treeitem>[aria-expanded="false"]+ * {display:none !important;}
}
@media screen and (max-width: 28.125em) {
header {
display: block;
margin: 0;
padding: 0.55em;
}
nav > ul ul.group,
nav > ul ul.group > li {margin:0; padding:0; display:block;}
nav > ul ul.group > li {display:flex; min-width: auto; flex-flow: column wrap;}
nav > ul ul.group > li > :nth-child(1){display:block; width:calc(100% - 3.1rem);}
nav > ul ul.group > li > :nth-child(2){display:block; width:3.1rem;}
nav > ul ul.group > li > :nth-child(3){display:block; width:100%;}
#main-nav {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
max-width: 100%;
align-self: center;
}
}
~~~
Mensch Leute, bitte helft mir…
der misanthrop
Brauche eure Hilfe bei Nav-Menü Anpassung im Firefox bei kleiner Bildschirmbreite
bearbeitet von einsiedlerLiebe Leute, bitte lasst mich nicht hängen…
Anscheinend verstehe ich das System von Flexbox (flex-grow / flex-shrink / flex-basis) hier in meinem Fall nicht. Ich habe mehrere Kombinationen ausprobiert aber nichts tut sich oder verändert sich. Ich möchte nur das @media screen and (max-width: 28.125em) die gesamte Breite annimmt und beim schmaler werden eben ganz normal umbricht. Aber irgendetwas mir unerklärliches erzeugt die Ränder links und rechts, nur was es ist kann ich mir nicht erklären.
~~~CSS
@media screen and (max-width: 62.500em) {
div.contentspan {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
margin: 0 0.3em; padding: 0;
border: 3px dotted green;
/* flex: 0 0 100%; */
}
.fav {
margin: 0;
padding: 0;
}
.headingspan {
align-self: flex-start;
}
header {
display: block;
margin: 0;
padding: 0.55em;
}
header img {
height: 110px;
}
#main-nav {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
max-width: 21.5em;
align-self: center;
/* flex: 1 1 100%; */
}
.main-treeitem>[aria-expanded="false"]+* {display:none !important;}
.main-treeitem>[aria-expanded="true"]+* {
margin-left: 0;
margin-top: 0.8em;
}
.treeitem>[aria-expanded="false"]+ * {display:none !important;}
}
@media screen and (max-width: 28.125em) {
header {
display: block;
margin: 0;
padding: 0.55em;
}
nav > ul ul.group,
nav > ul ul.group > li {margin:0; padding:0; display:block;}
nav > ul ul.group > li {display:flex; min-width: auto; flex-flow: column wrap;}
nav > ul ul.group > li > :nth-child(1){display:block; width:calc(100% - 3.1rem);}
nav > ul ul.group > li > :nth-child(2){display:block; width:3.1rem;}
nav > ul ul.group > li > :nth-child(3){display:block; width:100%;}
#main-nav {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
max-width: 100%;
align-self: center;
}
}
~~~
Mensch Leute, bitte helft mir…
der misanthrop