Grow your CSS skills. Land your dream job.

Responsive line & points along that line

  • # May 20, 2013 at 11:50 am

    Hi,

    I’d like to create a graphic that is fluid, and is a dotted line from the side of the page, to a point near the top. Along that line I would like there to be points, with annotated bubbles. The trouble is, I need this entire graphic to be fluid without just scaling an image. Here is the photo:

    http://i.imgur.com/65HHs5y.png

    Is this possible with CSS and HTML only? Is it even possible with Javascript? It seems very simple but I am having a lot of trouble. Any help would be greatly appreciated.

    Thanks,
    Scott

    # May 20, 2013 at 12:14 pm

    Maybe try SVG instead of png. Did you also try [background-size: cover](http://css-tricks.com/perfect-full-page-background-image/ “”) ?

    # May 20, 2013 at 12:39 pm

    I thought SVGs would be what I need. I googled around a bit and found this:

    http://meloncholy.com/blog/making-responsive-svg-graphs/

    For anyone else with a similar situation, it’s how to make SVG graphs responsive. I think this will help with what I need. I didn’t know you could manipulate them like this!

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".