Grow your CSS skills. Land your dream job.

Preventing Text from Disappearing

  • # May 21, 2013 at 5:03 pm

    So, I made the markup I want and I made it responsive to resizing (which took some work). However, I can’t figure out how I prevent the text on the right (.feature_content) from disappearing below the container when I resize. I feel as if this must be a simple change but one I have not yet been able to identify:

    http://codepen.io/anon/pen/JjEqI

    # May 22, 2013 at 10:26 am

    …anybody…?

    # May 22, 2013 at 10:30 am

    Why do you have position: absolute on both the .feature-content and .subpage-wrap?

    # May 22, 2013 at 10:32 am

    if your not adverse to using jQuery [fittextjs](http://fittextjs.com/) is a good plugin and @chriscoyier has a great [blog](http://css-tricks.com/viewport-sized-typography/) which talks about viewport width and height if your after a css3 method i cannot think of any fallback methods other than jQuery though.

    # May 22, 2013 at 10:50 am

    @Melindrea I have position:absolute on .feature_content to make sure the image (which sits inside .feature_content) always matches the height of the parent div. I have position:absolute on .subpage-wrap because this is the div around the menu, and I always want the menu to be at the bottom of this div while still remaining in front of the image – if I set it to relative it goes below the image.

    @unasAquila fittextjs doesn’t seem to be a solution in this situation. Unless I’m misunderstanding the blog post that doesn’t realy address the situation.

    # May 22, 2013 at 11:35 am

    We could change some of the DIVs to relative and incorporate a matching div height code for .feature_content and feature_inner but I can only find the appropraite jquery for DIV ID’s, not classes. Can anybody help with that? :-)

    It would probably work best if the jQuery was added to a markup like this: http://codepen.io/anon/pen/fEiem

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

You must be logged in to reply to this topic.

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