CODEWITHSUNDEEP
htmlcss
user14838795
user14838795

Reputation:

Remove line that appears in shape divider on mobile devices

I have a problem using waves, they work perfectly in large resolution. But when I use the developer tool to see how it would look on mobile devices, a line appears, I would like to remove that line, but I have no idea how to do this, do I need to use media queries?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anne's Wave</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .custom-shape-divider-bottom-1608135822 {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            line-height: 0;
            transform: rotate(180deg);
        }

        .custom-shape-divider-bottom-1608135822 svg {
            position: relative;
            display: block;
            width: calc(100% + 1.3px);
            height: 150px;
        }

        .custom-shape-divider-bottom-1608135822 .shape-fill {
            fill: #FFFFFF;
        }

        h1 {
            font-family: sans-serif;
            color: white;
            padding: 15vh;
            text-transform: uppercase;

        }
    </style>
</head>

<body>
    <div style="position: relative; background-color: dodgerblue; min-height: 80vh;">
        <h1>BE CREATIVE!</h1>
        <div class="custom-shape-divider-bottom-1608135822">
            <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"
                preserveAspectRatio="none">
                <path
                    d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
                    class="shape-fill"></path>
            </svg>
        </div>
    </div>
    <!--Shape Divider-->
</body>

</html>

EDIT

This is the picture of the line

enter image description here

Upvotes: 1

Views: 928

Answers (1)

Mitch Arseneau
Mitch Arseneau

Reputation: 268

The issue you are seeing is just Chrome DevTools mobile view not being 100% perfect. After all, it is an emulator, not an actual mobile device. I was able to replicate this same problem on my own website, but the thin line did not appear when using an actual mobile device. Nonetheless, If you would like the Chrome DevTools mobile view to remain perfect, you could add the declaration margin-bottom: -1px; on your svg shape to alleviate the issue.

Upvotes: 2

Related Questions