0

There is a page on my website that has a LARGE flowchart, something like this:

$-----$
 \   /  ( Assuming $ is an image and -, /, \ are lines )
  $ $

When I view this page on my phone, it looks horrible. The images and the lines are scattered. How can I fix this?

Thanks!

HTML:

<div class="imagecontainer">
    <img class="image" src="somesource">
    <img class="image" src="somesource">
    <img class="image" src="somesource">
    <img class="image" src="somesource">
</div>    

<div id="line1" class="line"></div>

CSS:

.image {
    background-color: #fff;
    border: 2px solid #000000;
    width: 120px;
}

.line {
    background-color: #000000;
    position: absolute;
    width: 5px;
}

#line1 {
    height: 237px;
    left: 300px;
    top: 300px;
}
Casanova
  • 243
  • 2
  • 11
  • You might want to look in to `srcset`. Maybe also check [HTML picture or srcset for responsive images](http://stackoverflow.com/questions/31848576/html-picture-or-srcset-for-responsive-images) and [Why do we need the picture element when we have srcset attribute](http://stackoverflow.com/questions/24132972/why-do-we-need-the-picture-element-when-we-have-srcset-attribute) – Tigger Oct 02 '16 at 04:22
  • You can use Javascript libraries to draw flow chart if you want to draw more dynamically. like D3.js – kuldipem Oct 02 '16 at 04:41
  • @kuldipem can you tell me how? – Casanova Oct 02 '16 at 05:08
  • pls check here http://www.draw2d.org – kuldipem Oct 02 '16 at 07:33

0 Answers0