Responsive SVG curve line design

Trying to position the SVG line in the center with the SVG icon, without overlapping them. Need a responsive solution that adapts to the container width. Any suggestions involving canvas or after pseudo classes? The line and icon should always be centered, even with additional content in this block. View CodePen

<div class="wrapper text-center">

  <svg class="red svg-1 svg-2" width=100% height=100% >
       <path  d="M 50 0 l 0 27 q 0 50 50 50 l 1000 0 q 50 0 50 50 l 0 50" stroke="#d4d4d4" stroke-width="1" fill="none" />
    </svg>
  <div class="row">        

    <div class="columns medium-4">...SVG code here...</div>

   
    <!-- Additional SVG codes for columns medium-4 -->

  </div>
</div>
csscanvassvgdrawingline

Answer №1

Check out this resource on Codepen

The concept behind it:

1) Implementing a line image as a background-image

2) Utilizing background-size: 100% 177px where 100% stretches the image to full width and 177px represents the original height of the image.

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

The webpage is inaccessible only on mobile Safari, with an error message indicating a lack of internet

Initially, I do not possess an iPad, however, some clients have reported an unusual issue with one of my websites on the iPad. They are unable to access any page on the website, instead encountering a blank page with the error message: "Safari cannot open ...

javascriptphphtmlcssmobile-safari

HTML tables with stripes and row spans

I found the initial table on this link. After reviewing the original table, I am looking to make modifications as shown in the highlighted image below. However, when attempting to add rowspan and colspan attributes to the td elements, I encountered an iss ...

htmlcsshtml-table

Center the element vertically if its height is less than the container's height, but let its height become 100% if the container's height is

I am trying to achieve a layout where an element (.figure) is centered horizontally when it is shorter than its container (.timeline-content), but matches the height of its container when longer. The height of the container changes based on its parent. T ...

cssflexboxvertical-alignment

Issues have arisen in IE8 with the background gradient on hover elements in the menu, while it functions properly in all other web browsers

Welcome to the website: I've recently taken on a project involving the gradiated menu on this site. The menu works flawlessly in Firefox, Chrome, and Safari - the hover effect changes the background color to a light gradiated green. However, when it ...

internet-explorercss

Update the appearance of an element in real-time using VUEJS

I am trying to use VueJS to dynamically change the position of a div. In the data function, I have a variable called x that I want to assign to the top property. However, the code I wrote doesn't seem to be working. Here is what it looks like: <tem ...

javascriptcssvue.js

CSS: flexible side panels with stationary center

I am looking for a specific layout that consists of three columns: left, content, and right. The left and right columns will each have an image, with the left column image aligning to the left edge of the browser and the right column image aligning to the ...

layoutcss

"Dynamic" visual in a Vue.js development scheme

Utilizing Vue.js for the development of a hybrid mobile application has been my current focus, with the Quasar framework serving as a key component. Recently, I incorporated an image into the application using the <img /> tag and utilized the followi ...

javascriptcssvue.js

Expansive Carousel Feature with Ng Bootstrap

In my Angular 5 application, I am utilizing the Carousel component from "@ng-bootstrap/ng-bootstrap": "^1.1.2". I am trying to display pictures in full screen but when I press F11, the image appears like this. I am unsure of which CSS properties to apply ...

javascriptcssangularbootstrap-4carousel

What could be causing my DIV anchor link to appear larger than the image it is supposed to be

Recently, I have rearranged my delete and like buttons within a DIV tag. Interestingly, even though I have meticulously set the width and height of the div tags to match that of the image, they still appear below the "Like" button. Additionally, I've ...

htmlcss

Replace !important with JavaScript/jQuery when using animate()

I need to animate the background-position-x, but there is a background-position: 0 0 !important; set in the css that cannot be removed. Is it possible to work around this using JavaScript? My jQuery code is functioning as intended, but it is being overridd ...

javascriptjquerycss

Browsing through database images and aligning them with CSS to the center

I am working on creating a single row of three centered images inside a div. Both the images and the div itself need to be centered on the page. The images will be contained within the div, here's what I have so far: HTML/PHP <?php $resul ...

phphtmlcssmysqli

What is the best way to eliminate the dotted border from clickable images?

The client has expressed their dislike for the dotted border, but I believe it is important to keep it for accessibility reasons. However, I suppose I will have to remove it since the client requested it. How should I proceed? ...

htmlcssimage

No matter how many times I modified the code in the ReactDOM.render() method within my index.js file, the end result remained unchanged

When I ran npx create-react-app my-app, and then proceeded to cd my-app and npm start, a browser opened on localhost:3000. While looking at the index.js file, I noticed that the ReactDOM.render() method included the following code: ReactDOM.render( <Rea ...

javascriptphphtmlcssreactjs

Struggling to synchronize animation timing between elements using jquery

When you navigate to an album (for example, Nature because I'm still working on the others) and select one of the images, they all gradually fade out while the selected image appears on the screen. What's actually happening is that the selected i ...

javascriptjqueryhtmlcss

Concealing a Specific Element with Text using jQuery

Is there a way to conceal the section that includes the element labeled as "Product Tags" on a webpage? ...

javascriptjqueryhtmlcss

Tips for inserting CSS into Django's UpdateView or CreateView forms

I have a project on the go, and the designer has handed me the design. I need to replicate the input forms from the design, which requires adding CSS to my form object. If I am using a Django class-based view, how can I add custom CSS to the form fields l ...

pythoncssdjangodjango-formsdjango-views

Hover Image Grid

Having trouble with creating an image grid that displays text on hover? Check out the issue I encountered with my layout: https://i.sstatic.net/PVDzB.jpg For some reason, the text is not aligning properly on the image, causing a layout problem. Any assist ...

htmlcsscss-grid

Increase the spacing between the scrollbar and the border

Looking to create some breathing room between the scrollbar and the right border of my text area. I've tried adjusting the margin-right/left values in -webkit-scrollbar with no success. Here's my style component: const FormTextArea = styled.texta ...

htmlcssscrollbarstyled-componentsmargin

Angular 2's SVG creations do not resize properly

It is a common knowledge that an svg element with the attribute viewbox should automatically scale to fit the sizes specified in the styles. For instance, let's consider a 200*200 circle placed inside a 100*100 div. Prior to that, we need to ensure t ...

csssvgangular

Using JAVA to generate SVG images, then embedding them into HTML using Base64 encoding URI

I am currently developing a service to generate SVG images. The main criteria is that the generated SVG must be compatible with an img tag (with the added bonus of working in a script tag) and it needs to function without the use of JavaScript. After some ...

javahtmlsvgbase64uri