Logo bleibt beim Seiten verkleiner nicht an seinem Platz
Mick62
- css
Mir ist gerade aufgefallen, dass ich ein Problem mit der Seite meiner Kneipe habe. Und zwar wandert das Logo in der Mitte, beim Aufziehen und verleinern der Seite, hin und her springt.
das css
/*-------------------------
________section gude_______
---------------------------*/
#welcome{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 0vw;
height: 50vh;
background-image: url(../images/beer2.jpg);
}
#welcome>img{
width: 25vw;
margin:0rem;
}
#welcome>h1{
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: rgb(77, 67, 100);
margin-top: 7vw;
}
.flex-container {
display: flex;
height: 40vh;
width: 100%;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: space-between;
margin: auto;
margin-bottom: 40px;
width: 100%;
}
.box1 {
position: relative;
min-width: 40%;
text-align: center;
padding: 20px;
border: none;
background-color:transparent;
}
.box2 {
position: relative;
min-width: 40%;
text-align: center;
padding: 20px;
border:none;
background-color:transparent;
}
@media only screen and (max-width: 900px) {
#welcome {
/* height: 55vh; */
background-image: url(../images/beer2_th.jpg);
}
#welcome>img{
width: 42vw;
margin:0vw;
}
#welcome>h1{
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size:larger;
color: rgb(31, 23, 46);
margin-top: 10vw;
}
.container {
flex-direction: column; /* Änderung: Auf Stapelrichtung ändern */
}
.box1,
.box2 {
max-width: 100%; /* Änderung: Vollständige Breite für kleinere Bildschirme */
margin-left: 0;
margin-right: 0;
font-size: small;
background-color: transparent;
}
}
@media only screen and (max-width: 600px) {
#welcome {
/* height: 55vh; */
background-image: url(../images/beer2_th.jpg);
}
#welcome>img{
width: 52vw;
margin:8vw;
}
#welcome>h1{
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size:larger;
color: rgb(31, 23, 46);
margin-top: 10vw;
}
}