Antwort an „Mick62“ verfassen

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;
  
  }

}

die Seite zu probieren hier

freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen