Issue
I am trying to use an SVG to create a curve look on my page. I have the SVG's inside of the page already and they look good on desktop screens, but when I view the page on mobile there are small lines that appear above and below the svg and I want them gone but do not know how.
Pictures of issue
Line near nav bar
Lines above and below picture
I would appreciate some help.
I have already tried setting the width and height to 100%.
Again they ONLY appear on Mobile.
I obtained the svg from https://getwaves.io/
Here is a link to the page https://okctechhelp.com/
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Heebo:wght@100;200;300;400;500;600;700;800;900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="styles/style.css">
</head>
<body background-color="red">
<nav class="navbar navbar-expand-lg navbar-light bgBlack">
<div class="container-fluid">
<a class="navbar-brand tcWhite" href="#"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div class="bgWhite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#050038" fill-opacity="1" d="M0,128L48,122.7C96,117,192,107,288,96C384,85,480,75,576,106.7C672,139,768,213,864,240C960,267,1056,245,1152,245.3C1248,245,1344,267,1392,277.3L1440,288L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg> <div class="row">
</div>
<div class="row justify-content-center align-items-center">
<div class="col-12 p-4 pb-0 mt-4 text-center d-block d-xl-none d-lg-none d-md-block d-sm-block">
<h1 style="font-size: 3em;" class="tcBlue mb-3">Need some <b>help</b>?</h1>
</div>
<div class="col-lg-6 col-sm-12 bgWhite">
<img src="images/istockphoto-1162239320-612x612.jpg" class="img-fluid mx-auto d-block" alt="Dog Pictures for Myspace"></a>
</div>
<div class="col-lg-6 col-sm-12">
<div class="row justify-content-center">
<div class="col-lg-9 col-8 me-lg-4 p-4 text-center">
<h1 style="font-size: 3em;" class="tcBlue mb-3 d-xl-block d-lg-block d-md-none d-sm-none d-none">Need some <b>help</b>?</h1>
<p style="font-size: 1.25em;" class="tcBlue">Technology can be a big hastle. Schedule the help you need right now, and lets get your problem solved.</p>
<div class="d-grid gap-2">
<button class="btn btn-lg btn-primary"><b>Get Help</b></button>
</div>
</div>
</div>
</div>
</div>
<div class="bgWhite">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#3f53d9" fill-opacity="1" d="M0,128L48,122.7C96,117,192,107,288,96C384,85,480,75,576,106.7C672,139,768,213,864,240C960,267,1056,245,1152,245.3C1248,245,1344,267,1392,277.3L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg> </div>
<div class="row bgBlue p-4">
<div class="col-lg-6">
<img src="images/pixel-cells-3974187__340.png"></a>
</div>
</div>
<div class="bgYellow">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#3f53d9" fill-opacity="1" d="M0,128L48,122.7C96,117,192,107,288,96C384,85,480,75,576,106.7C672,139,768,213,864,240C960,267,1056,245,1152,245.3C1248,245,1344,267,1392,277.3L1440,288L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg> <div class="row">
</div>
<div class="row">
<div class="column bgYellow">
<img src="images/60986d333bd61f243be83eb6_ICT Global (12).svg" style="float:right; max-width: 500px;" alt="Dog Pictures for Myspace"></a>
</div>
</div>
<footer>
<div class="row">
<div class="col-lg-6 bgBlack">
<img src="images/af789960-f3b1-49d0-93fc-f426d48ad8cb.avif" style="float:left; max-width: 500px;" alt="Dog Pictures for Myspace"></a>
</div>
</div>
</footer>
</div>
</body>
</html>
[1]: https://i.stack.imgur.com/hL3UG.png
[2]: https://i.stack.imgur.com/iWUiO.png
Solution
With the HTML you provided I see no lines in the svg, usually it's a browser Dev Tools issue when you have a zoom (in or out).
Try changing this:
to 100% and see if it's solved.
Edit:
Now I can see the issue, in the head tag you must add:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
To make this website responsive, the other way it's scaling down and not having a responsive behavior. See the docs for further information
Answered By - Franco Gabriel
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.