Habe für eine Seite ein Smartphone Problem!
Zu lösen mit
nur was schreib ich da rein?
So sieht das auf dem Smartphone aus:
![s23.png s23.png](https://www.html.de/data/attachments/5/5635-73beda242749146f1a758205fc334383.jpg)
das ist das relevante css
Hab schon einiges Probiert aber kläglich versagt.
Hier die Website
https://walachei-spachbrücken.de/
Zu lösen mit
CSS:
@media (min-width: 480px)
So sieht das auf dem Smartphone aus:
![s23.png s23.png](https://www.html.de/data/attachments/5/5635-73beda242749146f1a758205fc334383.jpg)
das ist das relevante css
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/
Zuletzt bearbeitet: