Absolute positioning of svg element not working

Question

I have tried to set an svg line so it would strikethrough the screen on all devices. On mobile devices, and computers with smaller screens, the line gets cut off, like the bottom example in my image.

I have tried to set the <svg> element to have an absolute position, but just putting it inside a <div> changes it, without even giving that div any css styling. Any suggestions?

Fiddle here

Answer 1

You need to wrap the svg element in a div (.svg-container) that is absolutely positioned inside the main area (.sec1) you want it to "strike through". The main area then needs to have a relative position applied to it so that the wrapper div knows where to position itself relative to:

HTML

<div class="sec1">
  <div class="svg-container">
   <svg height='100%' width='100%' xmlns='http://www.w3.org/2000/svg'>
    <line stroke='#5AB1BB' stroke-width='2' x1='0' x2='10000' y1='0' y2='10000'></line></svg>
  </div>
  <div class="w3-container">
    <div class="maintitlesection">
      <div class="title">
        William Stinson
      </div>
      <p>Computers, graphics, photo and video (and lots more).</p>
    </div>
  </div>
</div>

CSS

.sec1 {
  position: relative;
}

.svg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.maintitlesection {
  position: absolute;
  width: 300px;
  right: 30px;
}

Here's a fiddle