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

Home Forums CSS Expanding hr for responsive design.

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #38697

    I would like the green lines in this title to shrink with the browser window.

    Here I am trying to use a percent width for the green lines. But that doesn’t work because I have different size titles on each page. I don’t want to readjust the percentages for each title.

    I wish the hr length could always be 100% of distance between the title and the arrow pointer on the end.



    Have you considered using a background-image for the green line instead? You might be able to use :before and :after for the artwork on either side as well.



    I think this has come up before….here’s a couple of options


    Unfortunately neither of those options will work because they both have the title background color the same color as the body background.

    Because I have a wood pattern background that wont work for me. If I do background-transparent for title like I need to, on the above suggestions, the title will have the line going through the title.


    @aaronheine, did you check the fiddle I provided? It uses the same wood pattern on the text element to hide the green background passing through.


    In fact, you could do away with all of the gradient code and use a dataURI on the background instead. This extends support further back in IE as well:



    Here is a technique that doesn’t involve faking a background image:

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.