ARTICLE AD BOX
I have this HTML form:
:root {
--color-primary: #b42104;
--color-background-dark: #1a0e0c;
--color-slate-100: #f1f5f9;
--color-slate-400: #94a3b8;
--color-slate-500: #64748b;
--color-slate-700: #334155;
--color-white: #ffffff;
--font-display: 'Inter', sans-serif;
--border-radius-xl: 0.75rem;
--border-radius-3xl: 1.5rem;
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
overflow: hidden;
width: 1em;
}
.btn-primary {
display: flex;
height: 3.5rem;
align-items: center;
justify-content: center;
border-radius: var(--border-radius-xl);
background-color: var(--color-primary);
padding: 0 2rem;
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
color: var(--color-white);
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.btn-primary:hover {
transform: scale(1.02);
box-shadow: 0 10px 15px -3px rgba(180, 33, 4, 0.2);
}
.btn-primary:active {
transform: scale(0.95);
}
.section-status {
padding: 6rem 0;
}
.section-container {
max-width: 80rem;
margin: 0 auto;
padding: 0 1.5rem;
}
.status-card {
position: relative;
overflow: hidden;
border-radius: var(--border-radius-3xl);
border: 1px solid rgba(180, 33, 4, 0.2);
background: linear-gradient(to right, var(--color-background-dark), rgba(180, 33, 4, 0.2));
padding: 2rem;
}
@media (min-width: 768px) {
.status-card {
padding: 3rem;
}
}
.status-content {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.status-content {
flex-direction: row;
align-items: flex-start;
}
.status-text-container {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.status-header {
display: flex;
align-items: center;
gap: 0.75rem;
}
.status-header .material-symbols-outlined {
color: var(--color-primary);
}
.status-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-slate-100);
margin: 0;
}
.status-description {
color: var(--color-slate-400);
margin: 0;
}
.email-form-container {
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 24rem;
}
.email-form {
display: flex;
flex-direction: column;
gap: 0.75rem;
width: 100%;
}
@media (min-width: 640px) {
.email-form {
flex-direction: row;
}
}
.email-input {
flex: 1;
height: 3.5rem;
padding: 0 1rem;
border-radius: var(--border-radius-xl);
border: 1px solid var(--color-slate-700);
background-color: rgba(26, 14, 12, 0.5);
color: var(--color-slate-100);
font-size: 1rem;
font-family: var(--font-display);
transition: all 0.2s;
}
.email-input::placeholder {
color: var(--color-slate-500);
}
.email-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(180, 33, 4, 0.1);
}
.email-submit {
gap: 0.5rem;
white-space: nowrap;
padding: 0 1.5rem;
}
.email-submit .material-symbols-outlined {
transition: transform 0.2s;
}
.email-submit:hover .material-symbols-outlined {
transform: translateX(0.25rem);
}
.status-bg-decoration {
position: absolute;
right: -5rem;
top: -5rem;
opacity: 0.1;
}
.status-bg-decoration .material-symbols-outlined {
font-size: 200px;
color: var(--color-white);
}
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=block" rel="stylesheet"/>
<section class="section-status">
<div class="section-container">
<div class="status-card">
<div class="status-content">
<div class="status-text-container">
<div class="status-header">
<span class="material-symbols-outlined">construction</span>
<h3 class="status-title">Projekt w trakcie wdrażania</h3>
</div>
<p class="status-description">Dołącz do naszej społeczności i bądź na bieżąco z każdą aktualizacją.</p>
</div>
<div class="email-form-container">
<form class="email-form" action="#" method="POST">
<input type="email" name="email" class="email-input" placeholder="Twój adres email" required aria-label="Adres email">
<button type="submit" class="btn-primary email-submit">
Śledź postępy
<span class="material-symbols-outlined">arrow_forward</span>
</button>
</form>
</div>
</div>
<!-- Decorative bg -->
<div class="status-bg-decoration">
<span class="material-symbols-outlined">code</span>
</div>
</div>
</div>
</section>
NOTE: The issue is only visible on a larger screen. Use expand to observe the issue.
Somehow the padding on flex items makes the items overflow the flex container.
I was experimenting and also searching on SO. Found those questions:
Why is padding expanding a flex item? Should flex item overflow the flex container instead of breaking lines?But the answers to those questions were not helpful. I was adding box-sizing: content-box; on the form and flex: 1 1 50%; or flex: 1 1 0 on items nothing change the overflow.
I was thinking that may the issue is fixed size of input box. But adding width: auto; also didn't change anything.
I was thinking that maybe the issue is icon font. But adding fixed width: 1em; to the icons also makes no difference.
I'm lack of ideas.
This is my page:
67.2k58 gold badges252 silver badges467 bronze badges
5
