[GELOEST] leider noch ein response Problem nur in der Smartphon ansicht

[mick62]

Habe für eine Seite ein Smartphone Problem!
Zu lösen mit

@media (min-width: 480px)

nur was schreib ich da rein?
So sieht das auf dem Smartphone aus:

das ist das relevante css

/*---------------------------
----------Footer-------------
---------------------------*/

footer {
  color: wheat;
  width: 100%;
  padding: 2rem 1rem;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  font-family: "Arial, sans-serif";
  background-color: rgb(74, 71, 71);
  text-align: center;
}

footer > section {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem;
  text-align: center;
  flex-basis: 100%;
}

footer > section > h4 {
  font-size: 2rem;
  border-width: 1px 0;
  border-style: solid;
  width: 100%;
  padding: 0.5rem 0;
  margin-bottom: 2rem;
}

footer > section.contact > address {
  line-height: 2rem;
  font-size: 1.1rem;
  font-style: normal;
}

footer > section.contact > address > a {
  font-family: "Arial, sans-serif";
  text-decoration: none;
  color: wheat;
  line-height: 2rem;
  font-size: 1.1rem;
  font-style: normal;
}

footer > section.social > div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

footer > section.social > div > a > img {
  width: 40px;
  height: 40px;
}

footer > section.hours > div > p {
  width: 100%;
  font-size: 1rem;
  margin: 0.3rem 0;
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

footer > section:last-of-type {
  width: 100%;
}

footer > section.additional-info {
  width: 100%;
  order: 4;
}

footer > section.additional-info > p:first-of-type {
  font-size: 1.6em;
  font-weight: bolder;
  color: goldenrod;
  border-bottom: 1px solid wheat;
  width: 100%;
  margin-bottom: 1rem;
  padding-bottom: 0.3rem;
}

footer > section.additional-info > p:last-of-type {
  font-size: 1.6em;
}

footer > section:last-of-type {
  flex-basis: 100%;
}

@media (min-width: 768px) {
  footer > section {
    flex-basis: 45%;
  }

  footer > section:last-of-type {
    flex-basis: 100%;
  }
}

@media (min-width: 1024px) {
  footer {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  footer > section {
    flex-basis: auto;
    margin: 1rem;
  }

  footer > section.social > div {
    gap: 2rem;
  }

  footer > section.additional-info {
    width: 100%;
    order: 4;
  }
}

Hab schon einiges Probiert aber kläglich versagt.
Hier die Website

https://walachei-spachbrücken.de/

 

[msi]

So sieht das auf dem Smartphone aus:

Bei mir nicht.

 

[mick62]

Bei mir nicht.

Ok wie sieht es bei dir aus?. Ich habe hier 3 verschiedene Smartphones von Freunden probiert. Alle das gleiche Problem.
Was für ein smartphone benutzt du?

 

[Sempervivum]

Das liegt daran, dass Du ein min-height von 100vh bei den Elementen hast:

@media screen and (max-width: 480px) {
    section {
        /* min-height: 100vh; */
        width: 100%;
        padding: 10px;
        scroll-margin-top: 60px;
        box-sizing: border-box;
    }
}

Lösche ich das, verschwinden die Abstände.

 

[mick62]

Man das hat gedauert bis ich meinen eigenen Mist Verstanden hatte.
Ich hatte ganz oben in der grund css das 480er @media drin was au die gesamte Seite auswirkte .
Wie dem auch sei jetzt alle mir bekannten Probleme gelöst .
Danke an Alle