I’m working on a custom section in my website where I need to position a blue background element within a section. However, I’m encountering an issue where the blue background component overflows the section and affects the layout of subsequent sections.
Here is the relevant part of my HTML and CSS:
<style>
body {
margin: 0;
}
.custom-section {
background: linear-gradient(180deg, #D6F1FA 0%, #C5EAF7 100%);
position: relative;
width: 100%;
height: 650px;
overflow: hidden; /* Prevent overflow */
}
.custom-section .container-wrapper {
position: relative;
width: 1510px;
height: 430px;
border: 2px dashed red;
left: 75px;
top: 110px;
overflow: hidden;
max-width: 1440px;
}
.custom-section .text-section {
width: 520px;
height: 100%;
position: absolute;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 2px dashed blue;
}
.custom-section .title-container h2 {
font-family: 'ITC Garamond Std';
font-size: 64px;
font-weight: 300;
line-height: 70px;
letter-spacing: -2px;
text-align: left;
margin: 0;
padding: 0;
}
.custom-section .text-container {
font-family: 'iCiel Internacional', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 26px;
text-align: left;
width: 60%;
margin-bottom: 0;
padding-bottom: 0;
}
.custom-section .spacer {
flex: 1;
border: 2px dashed green;
}
.custom-section .images-wrapper {
width: 960px;
height: 430px;
position: absolute;
left: 550px;
display: flex;
gap: 30px;
border: 2px dashed purple;
overflow: hidden;
}
.custom-section .images-wrapper img {
width: 300px;
height: 430px;
}
.circular span {
font: 14px Inter;
height: 80px;
position: absolute;
left: 75px;
transform-origin: bottom center;
line-height: 16.94px;
}
.circular {
width: 160px;
height: 160px;
border: 2px dashed yellow;
position: relative;
left: -10px;
}
@keyframes rotateText {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.circular {
width: 160px;
height: 160px;
border: 2px dashed yellow;
position: relative;
animation: rotateText 10s linear infinite;
}
.blue-background {
width: 1311px;
height: 590px;
left: 300px;
background-color: blue;
position: relative;
opacity: 0.15;
transform: rotate(30deg);
}
</style>
<section class="custom-section">
<div class="container-wrapper">
<div class="text-section">
<div class="title-container">
<h2>{{ section.settings.heading }}</h2>
</div>
<div class="text-container">
<p>{{ section.settings.content }}</p>
</div>
<div class="spacer"></div>
<h1 class="circular">
{{ section.settings.circular_content }}
</h1>
</div>
<div class="images-wrapper">
<img src="{{ 'image1.jpg' | asset_url }}" alt="Image 1">
<img src="{{ 'image2.jpg' | asset_url }}" alt="Image 2">
<img src="{{ 'image3.jpg' | asset_url }}" alt="Image 3">
</div>
</div>
<div class="blue-background"></div>
</section>I want the blue background to be contained within the section, but it currently overflows and impacts the layout of the next section. How can I adjust the CSS to ensure that the blue background stays within the bounds of the custom section?
This is how it looks now:
This is how it should look like:
New contributor
gggggggggggggg is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.