Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS css arrow with a responsive height to fill responsive container

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #161438
    shortcutt
    Participant

    So I’m designing/coding an infographic for a web site with a responsive layout, and I’m still a little new with html/css. I used a responsive table to structure the information, and in the right-hand column I need there to be an arrow that aligns with bits of information in the left-hand column. I know how to code the arrow top and arrow bottom, but I need a nice stretchy middle that will fill the height of the article as it changes, keeping the top of the arrow aligned with the top row, and the bottom part of the arrow aligned with the bottom row.

    Is there a solution for this that I’m missing?? For some reason putting “height:100%;” in the CSS for the middle bit of the arrow isn’t working.

    Thanks!!

    #161451
    Paulie_D
    Moderator

    Do you have an image of what you are trying to achieve?

    #161453
    shortcutt
    Participant

    Your text to link here…

    Yes, thanks. I put black border around each of the ‘s so it’s more clear. So basically, it’s a list of Google’s robots . On the left you can see the blurbs with each robot and the description of each. On the right, you can see where it says “Tolerable” and then the numbers in that column lining up with each blurb. I want to put a flexible, verticle arrow in this column placed underneath the numbers. Does this make sense? The scale goes from “Tolerable” to “Terrifying” rating each robot from least to most scary. It’s important to have the table just so when the screen’s resized everything’s still neatly aligned.

    #161464
    Paulie_D
    Moderator

    Ok…now can you make a Codepen of what you have already?

    HTML & CSS.

    #161467
    shortcutt
    Participant
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.