Last update: April 28, 2020

How to make a Shape Divider responsive

There are several ways to make a Shape Divider responsive.
Different methods for different results.
It will mainly depends on the SVG attribute: preserveAspectRatio

Our example comes from this free collection: Design Set - Shape Dividers

1st method : no aspect ratio

If you check the SVG code, you will see a preserveAspectRatio attribute. In our example, it was set to "none", which means that it will scale the shape non-uniformly (it will deform it):

<svg xmlns="http://www.w3.org/2000/svg" class="shapediv13" viewBox="0 0 1000 100" preserveAspectRatio="none">
<path d="M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7
c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4
c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z"></path>
</svg>

So, our wave will look like this on mobile:

2nd method : media queries

We can use the media queries to change the height of the shape.
Let's check the CSS of our wave. The height was set to 250px:

.shapedivsection13 svg.shapediv13 {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scale(1, -1);
    height: 250px;
    width: calc(100% + 1.3px);
    fill: #FF5252;
}

What we can do is simply add a couple of breakpoints and change the height. So the wave can look better on lower resolution.

@media (max-width: 991px) {
    .shapedivsection13 svg.shapediv13 {
        height: 150px;
    }
}

@media (max-width: 479px) {
    .shapedivsection13 svg.shapediv13 {
        height: 50px;
    }
}

The result (resize the window to see the difference):

3rd method : same shape everywhere

Let's change the preserveAspectRatio to "xMidYMin":

<svg xmlns="http://www.w3.org/2000/svg" class="shapediv13" viewBox="0 0 1000 100" preserveAspectRatio="xMidYMin">

Our wave will now have his original shape, and it will keep that exact same shape whatever the resolution.

It also means that the height CSS property won't have any effect now.
So you can keep it or delete it, it doesn't matter.

.shapedivsection13 svg.shapediv13 {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scale(1, -1);
    height: 250000px;
    width: calc(100% + 1.3px);
    fill: #FF5252;
}

The result:

4th method : same shape but cropped

Change the preserveAspectRatio to "xMidYMin slice".

<svg xmlns="http://www.w3.org/2000/svg" class="shapediv13" viewBox="0 0 1000 100" preserveAspectRatio="xMidYMin slice">

We can keep the original CSS here, but this time, you can change the height again.

.shapedivsection13 svg.shapediv13 {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scale(1, -1);
    height: 250px;
    width: calc(100% + 1.3px);
    fill: #FF5252;
}

The result will depend on the height, but the most interesting part here is when you resize the window:
It doesn't deform the shape, it doesn't make it smaller, it just kind of "crop it", like a fixed background picture:

Here is a comparison of the four methods, after we resized them:

Note

It will all depends on how you have built your shape (or where you copied it from). Some of them can have a different preserveAspectRatio, or have different CSS styles.

The best way to find the shape you want, it's to open the Devtools , change the preserveAspectRatio attribute and play with the height and the width CSS properties.

closealign-justifychevron-downcaret-up