Wie kann ich ein Lückenproblem beheben, das auf einer Website auftritt, wenn ich sie auf einem Telefon anschaue? Sie ers ⇐ CSS

[Guest]

Hier ist es in der Telefonansicht

Code: Select all

* {
font-family: inter, sans-serif;
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-size: cover;
background-position: center center;
background: linear-gradient(135deg, #ff66a6,  #ff70fb, #9f2fed);
color: white;
background-attachment: fixed;
}
.Announce-section {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 2rem 1rem;
color: white;
text-align: center;
}

/* Section-Specific Styling */
.Announce-section {
background: url('announcement-design.png') no-repeat center center;
background-size: cover;
margin: 0; /* Remove any margin */
padding: 20px; /* Add some padding for better spacing */
min-height: 100vh; /* Ensure it takes full height */
box-sizing: border-box;
}

.seccontainer {
max-width: 1000px;
width: 100%;
background: rgba(255, 102, 166, 0.8); /* Same background color as .img-text */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* Same box shadow as .img-text */
border-radius: 15px; /* Same border radius as .img-text */
padding: 2rem;
color: white;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

Code: Select all