So das Galerieprojekt ist erstmal zufrieden beendet
Jetzt habe ich ich Problem mit einer Flexbox in der es 2 weitere Flexboxen gibt. Die @media macht ja erst ab 700px reponsive.
Das liegt wahrscheinlich daran, dass meine Idee war für box1 65% und box2 35% vorgegeben habe.
Was kann ich da besser machen
CSS
/*-------------------------------------------
...............About.........................
--------------------------------------------*/
#about
{
min-height: 100vh;
background-color:grey;
justify-content: flex-start;
}
#about>p
{
font-weight: bold ;
color: fff;
width: 70%;
}
#about>h1{
font-family: Arial, Helvetica, sans-serif;
color:moccasin;
}
/* flexbox specific styles*/
.flex-container {
width: 80%;
padding: 5px;
display: flex;
flex-direction: row; /* Default */
gap: 1em 2em;
justify-content: center;
background: yellowgreen;
}
.flex-item-left{
justify-content: center;
padding: 10px;
font-family: sans-serif;
font-size: 2em;
color: #333;
flex:65%;
/* background: gray; */
background: burlywood;
}
.flex-item-left>h1{
font-size: 0.5em;
align-content: center;
}
.flex-item-right{
display: flex;
justify-content: center;
padding: 10px;
font-family: sans-serif;
font-size: 2em;
color: #333;
flex:35%;
/* background: gray; */
background: lightblue;
}
@media (max-width: 700px) {
.flex-item-right, .flex-item-left {
flex: 100%;
justify-content: center;
font-size: 1em;
}
.flex-container{
flex-wrap: wrap;
margin-bottom: 25px;
}
}
Alles anzeigen
einzusehen unter miflo.de