What could be causing the appearance of lines above and below my SVG element in the html?

I'm using an SVG to create a curved look on my web page. The SVGs are already in place and look great on desktop screens, but when viewed on mobile, I see small lines appearing above and below the SVG that I want to remove.

Here are some pictures of the issue:
Line near navigation bar Lines above and below the image

Your help in resolving this would be greatly appreciated.

I've already attempted setting the width and height to 100%, but the lines only appear on mobile devices.

The SVG was obtained from

Link to the page: 

<html>
        <head>
            ...
        </head>
        <body bgcolor="red">
            ...
        </body>
    </html>
htmlcsssvgbootstrap-5

Answer №1

After reviewing the provided HTML code, it appears that there are no lines showing in the SVG. This could be a result of a browser Dev Tools issue caused by zooming in or out.

You can try resolving this by adjusting the following:

https://i.sstatic.net/LxJKY.png

Change it to 100% and check if the problem is fixed.

Edit:

I have identified the issue now. In the head tag of your code, ensure you include the following:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

To create a responsive design for your website, this meta tag is crucial as it prevents scaling issues and ensures proper responsiveness. For more information, refer to the official documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

EU directive on cookies: What is the best way to store your preferences?

While there are numerous third-party solutions available to comply with the cookie EU directive, I prefer to learn how to implement it myself. My specific requirement is that when a user clicks on "Accept", their choice should be remembered for the entire ...

jqueryhtmlcss

Having trouble with the JavaScript DOM rewrite for aligning text?

function modifyTextAlignment(){ document.getElementById("th1").style.textAlign = "right"; } #th1{ text-align:left; } <table> <tr><center><th colspan="2" id="th1">List of Important Emergency Contacts</th><center></tr& ...

javascriptjqueryhtmlcss

When the click event is triggered, the second function guess() does not execute

I am currently developing a number guessing application. It consists of two functions, the first one called startGame() works correctly (it receives the maximum number and then disappears by adding the hidden class). However, the second function that is ...

javascripthtmlfunctionevent-handlingmouseclick-event

Guide to setting the first tab as the default tab using Thymeleaf, Css, and Bootstrap

I am currently working on a project where I need to dynamically create tabs based on a list retrieved from my Spring backend using Thymleaf and Bootstrap. While I have managed to successfully create the tabs and content, I am facing an issue where the fi ...

javascriptcssthymeleaf

Scaling Flexbox divs based on images dimensions

Check out this cool example page When resizing the window in Firefox, Internet Explorer 10, and Opera, the images remain at their current sizes without any scaling. However, Chrome shrinks everything down proportionally as desired. It's unclear whet ...

cssflexbox

Executing a function every time a prop is updated within the component

I have a prop named transcript in one of my components. Whenever I speak a voice intent, it gets updated. I want to execute a function every time the transcript changes and pass the transcript as an argument. In this code snippet, I attempted to use an On ...

javascripthtmlreactjsonchangereact-props

Implementing Angular CDK for a dynamic drag-and-drop list featuring both parent and child elements

I'm currently working on setting up a drag and drop list within Angular using the Angular CDK library. My goal is to create a list that includes both parent and child elements, with the ability to drag and drop both parent items as well as their respe ...

javascripthtmlangulardrag-and-dropangular-cdk-drag-drop

Is it possible to alter the appearance of my menu when clicked on?

Is there a way to update the appearance of an active menu or submenu that is selected by the user? I would like the chosen submenu and its parent menu to have a distinct style once clicked (similar to a hover effect, but permanent). /*jQuery time*/ $(do ...

javascriptphpjqueryhtmlcss

Can I use the mouseover event on an image to display a sibling div?

Hi everyone! I'm fairly new to web development and I could really use some advice. I'm trying to implement a mouseenter event on an img tag to show a sibling div, but I'm encountering some strange behavior. The mouseenter event seems to be w ...

javascripthtmlcss

Leveraging the power of Required (html5) feature in Internet Explorer

What should I do if I want to make a textbox required on my webpage, but the issue is that it uses an HTML5 attribute? Is there a solution or alternative available? This is how I create my TextBox: @Html.TextBoxFor(model => model.SubChoiceText, new { ...

asp.net-mvchtmlinternet-explorerhtml-helper

Enhance Your Cards with Hover Zoom Text

I'm looking to place some text in front of a card hover zoom effect, but currently it appears behind the zoomed image upon hover. <div style="margin-top: 50px;" class="container imgzoom"> <div class="row ...

htmlcssbootstrap-5

Replace a single Vuetify icon with a Font Awesome SVG icon

Can individual icons from Vuetify be replaced with Font Awesome svg icons directly, without the need for a custom component for each icon? For example: import { svgPathData as envelopeSvg } from '@fortawesome/free-solid-svg-icons/faEnvelope' imp ...

vue.jssvgvuetify.jsfont-awesome

Tips for loading all background images simultaneously

I just created my first website page with a few background images that crossfade. However, I am experiencing an issue where the next background image takes some time to load during the crossfading effect if the page is not cached on the user's comput ...

htmlcssbackground-image

How to make a letter stretch all the way down the paper?

As I'm creating a table of contents for my website, I was inspired by an interesting design idea that I came across: I am particularly drawn to how the T extends down and each section is numbered with the title wrapped around it. How can I achieve th ...

htmlcss

Display a full-width card beneath each small card in every row using CSS

In a scenario where I have designed a layout consisting of 3 column/row cards across multiple rows. Each card displays basic information, and when a user clicks on any specific card, a full-width card below that row will display more detailed information. ...

htmlcsscss-positioncardview

Tips for shutting down a modal box without using the "x" button?

I'm currently working on creating a modal box using HTML and Javascript, and I came across this example (reference https://www.w3schools.com/howto/howto_css_modals.asp), which seems to fit my needs quite well... I made some modifications to it... &l ...

javascripthtmlmodal-dialog

What is the best way to show the initial 20 words on the screen, followed by the next 20 words using

Within a single tag, I have a string as shown in the example below. My goal is to display the first 20-25 words on screen, then continue with the next set of words, and so forth. Once 20 words are displayed, the remaining text should be hidden. <p>Lo ...

javascripthtml

Determine the exact location of a click within an SVG element

This block of HTML includes SVG elements: <div class="container"> <div class="spacer"></div> <svg> <g id="polygonGroup" transform="translate(80, 50)"> <polygon points="-60,-10 -35,-30 -10,-10 -10,30 -60,30"&g ...

javascriptjquerysvgclickdom-events

Tips for enabling selection of list items in an input tag

Below is the code I have written to create an InputFilter. MyFilter = function(args) { var dataUrl = args.url; var divID = args.divID; var div = document.getElementById(divID); var myTable = '<input type="text" id="myInput" on ...

javascripthtmlcss

What steps can I take to make sure that the content on my website is properly sized to fit within the browser window?

I'm currently working on a website project for my college assignment and I could really use some assistance with a significant issue that I've encountered. Whenever I open the html file of my website on my MacBook, which has a screen resolution ...

htmlcss