KPC
Kevin Powell - Community•2mo ago
Soum

How to handle shape dividers responsibly?

Hi, is there a better way to handle shape dividers? it goes misaligned for all other screens than the one i initially code for
No description
2 Replies
Chris Bolson
Chris Bolson•2mo ago
Can you share some code so that we can see what you currently have and better understand what the issue is?
Soum
SoumOP•2mo ago
Hey forgot to add that initially. Good catch. HTML 
<!-- shape divider -->
    <div class="shape-divider">
    <svg xmlns="http://www.w3.org/2000/svg" width="1923" height="398" viewBox="0 0 1923 398" fill="none">
    <path d="M0 346V186.5C0 186.5 249.5 -30.5002 500.5 4.00004C605.911 18.4889 666.5 128 761.5 172C843.858 210.145 875.779 65.2477 966.5 62.5001C1069.65 59.3763 1096.19 175.553 1198.5 189C1319.42 204.893 1380.27 132.486 1496 94.0002C1708 23.5001 1922.5 189 1922.5 189V397.5C1922.5 397.5 1833.6 392.97 1654.5 366.5C1502.35 344.013 1238.05 349.974 1087.5 318.5C760.97 250.235 728 401.5 442 318.5C293.217 275.322 0 346 0 346Z" fill="black"/>
    </svg>
    </div>
<!-- shape divider -->
    <div class="shape-divider">
    <svg xmlns="http://www.w3.org/2000/svg" width="1923" height="398" viewBox="0 0 1923 398" fill="none">
    <path d="M0 346V186.5C0 186.5 249.5 -30.5002 500.5 4.00004C605.911 18.4889 666.5 128 761.5 172C843.858 210.145 875.779 65.2477 966.5 62.5001C1069.65 59.3763 1096.19 175.553 1198.5 189C1319.42 204.893 1380.27 132.486 1496 94.0002C1708 23.5001 1922.5 189 1922.5 189V397.5C1922.5 397.5 1833.6 392.97 1654.5 366.5C1502.35 344.013 1238.05 349.974 1087.5 318.5C760.97 250.235 728 401.5 442 318.5C293.217 275.322 0 346 0 346Z" fill="black"/>
    </svg>
    </div>
CSS 
/* Shape Divider */
.shape-divider {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: -150px; /* Large negative margin to overlap with hero section */
    margin-bottom: -80px; /* Negative margin to overlap with features section */
    z-index: 5;
    display: block;
    overflow: hidden; /* Prevent overflow on smaller screens */
}

.shape-divider svg {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    max-width: 1920px; /* Match 1080p screen width */
    margin: 0 auto; /* Center the SVG if it's smaller than viewport */
}
/* Shape Divider */
.shape-divider {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: -150px; /* Large negative margin to overlap with hero section */
    margin-bottom: -80px; /* Negative margin to overlap with features section */
    z-index: 5;
    display: block;
    overflow: hidden; /* Prevent overflow on smaller screens */
}

.shape-divider svg {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    max-width: 1920px; /* Match 1080p screen width */
    margin: 0 auto; /* Center the SVG if it's smaller than viewport */
}

Did you find this page helpful?