Making uneven columns on a page

[thenickfox]

I'm attempting to make a page that has my logo on the lefthand side and some instructions on the righthand side.

Using the baked in column classes cause the text on the right to wrap around the logo on the left.

I've tried setting the width of the right column div to 50% and floating it, but then when viewed on a smaller screen and the columns responsively collapse, the instructions only take up half the width of the tiny screen.

I've tried setting a false height to the left div, but this again causes issue with the responsive design leaving a HUGE gap between the logo and the start of the text on a mobile screen.

So, what solutions are there? I'd prefer to have them be something I can enter on the page editor, rather than something I have paste into the CSS files of the theme to avoid screwing up the column classes that are currently working for me.

Picture for reference to show what it's doing: (Since I may be screwing with the formatting more on the live site to try other fixes)

Anyone have any ideas on how to accomplish this?

Thanks!

-Nick

http://successhacking.com/thanks/

[Brad Dalton]

Many solutions.

I would use the sub footer left and right widgets from Outreach Pro because they are uneven widths

---

Tutorials for StudioPress Themes.

[Brad Dalton]

Do you mean within the content area?

---

Tutorials for StudioPress Themes.

[Victor Font]

Add a new class to the first half div like so:

<div class="one-half first fixed-height">

Then add the new class to style.css:

.fixed-height {
    min-height: 340px;
}

I think this will achieve what you're seeking.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[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