Grow your CSS skills. Land your dream job.

Overflow Issue? Span?

  • # March 5, 2013 at 12:00 pm

    I would like to have my embedded video span the width of the wrapper. Within the wrapper is a div called main-column that is keeping everything 40px away from the edge of the wrapper. So, when I embed a Vimeo video into a page, it naturally crops the video to be 880px rather than the desired full 960px. Is this something that can be fixed with overflow? I am really not sure. Here is the website, if you want to give it a looksy. Thank you in advance!

    # March 5, 2013 at 12:08 pm

    Check out fitvid.js (http://css-tricks.com/fitvids-js/)

    EDIT: Oh…and this…http://css-tricks.com/rundown-of-handling-flexible-media/

    # March 5, 2013 at 12:12 pm

    Just a suggestion that is unrelated to the question, you shouldn’t use text shadows on body copy. That creates legibility issues.

    Anyway, I agree with Paulie.

    # March 5, 2013 at 12:16 pm

    >Anyway, I agree with Paulie.

    FTW! :)

    # March 5, 2013 at 12:56 pm

    Thank you for the tip. So, fitvid.js will basically make my video the correct size no matter what the size of the container is? That’s cool, but I think I need to word my question differently because that was not what I was having trouble with. Basically, I want my Vimeo video to span the full width of the wrapper, which is 960px. I want it from edge to edge. But the main-column is keeping the video from doing that because there is a limit of 880px. How do I get my video to break the bounds of the main-column while staying within the main-column and keeping it centered?

    @chrisburton, I am only using text-shadow on the introductory paragraph and h2s. The rest of the text will be just plain, off-white ‘Droid Sans’ text. Would you still suggest against that?

    Thank you for your help thus far!

    # March 5, 2013 at 1:04 pm

    You could either break up the wrapper or use absolute positioning.

    The problem is that the h2’s don’t look like headings. Headings are/should be much shorter with just a summary and it doesn’t have to be a complete sentence. What I see is paragraph text. But yes, I would lose it.

    # March 5, 2013 at 1:08 pm

    remove the overflow from #main-column and add a left margin of -40px to the iframe

    # March 5, 2013 at 1:30 pm

    @chrisburton, but if the text is perfectly legible, then what is the point of not having it? I guess we will have to agree to disagree on this point.

    Thank you muchly, @wolfcry911. Your method is a lot better than what I ended up doing. I created a new div id="main-column-mini" which had a width of 880px and then I made main-column have 960px once more. Then I proceeded to wrap the main-column-mini div around anything I wanted to be 880px wide. But alas, your way is much better. Thank you for the fix.

    @Paulie_D, and I will add fitvid.js in just a little bit for finicky re-sizing issues.

    # March 5, 2013 at 1:40 pm

    I didn’t say it wasn’t legible, I was trying to make a point that it makes it less legible. Regardless, I don’t think text shadow works there.

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

You must be logged in to reply to this topic.

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