[thenickfox]

Yes, BradAlton I'm looking to make the the second (right hand) column in the content area simply stay on the righthand side...until the responsive setting kick in, then I'd like them to be vertical without a gap between the logo and the second column text.

And Victor, all that did was make the left hand column a little taller, but didn't prevent the wrapping issues...and still introducing the gap between the left and right columns once they collapse responsively.

However, I found a fix that is "good enough" for now. There is still one potential problem I see for it, but hopefully this will mostly solve the problem,

I started by adding a new class called column_match to the first div. Then I set the height of that class to 1000px. (If someone ups their font size manually, they might still see text wrapping, but it's a close enough approximation of the height that it should work) Using @screen, I then added a manual break point where the height of the class switches from 1000px to 100%, limiting it to the image height.

Here's the code I used in case it will benefit anyone else...

Div tag:

<div class="one-half first column_match">

CSS:

.column_match {
    height: 1000px;
}

@media only screen and (min-width : 240px) and (max-width : 800px) {
.column_match {
    height: 100%;
}
}

Thanks for your help guys. I'm still open to solutions that would get rid of the 1000px problem, but this should be good for now!

If anyone wants to see it in action, here's the direct link: http://successhacking.com/thanks/

And as the URL says: THANKS.

-Nick

[Author]

Posts