As I reduce the window viewing site, columns on Home don't line up

[computerkitten]

Question... this is a Metro theme at:

http://tinyurl.com/d4qjcfu

...and why is it when I view the Home page with a reduced window size...the columns on this Home page can't stay together of the same height?  I have a height set on them.  This is for the top 2 sections of the 2 columns, "Website & SEO Offerings…" and "Logo Design".  Otherwise I like the responsiveness of this theme!

I would like the height to stay the same when reducing down the window.  Probably doesn't look quite right on an Ipad as I view it in approximately that width.

Anyone know why?

Thanks!

CK

[David Chu]

Ah, I work with a designer who also prefers HTML-table-like boxes. 🙂 Doing this is a CSS headache.

As you reduce the size of the page, you'll see that the stuff on the left is longer, so it shows up longer because it's squeezed. The right column does not "know" the height of the left column, so it just fills up to its own capacity. For my client, I brewed up some jQuery that could handle this "thinking" on-the-fly. But if you don't want to hire me... 😉

You could try some CSS like this, and if you only want it to happen at a certain size level, thread it into the "media queries" section at a particular size. Adjust to taste until you get a nice height for all. Further up in the code the height is set at 325px in a few of these spots. This code should handle all 4 boxes:

.home-middle .widget {
  min-height: 400px;
}

You could also reduce the type size at the smaller device levels.

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[computerkitten]

Thank you Dave for all your help!  You actually helped get me on the right path for making these adjustments.  Using the Firefox Developer Toolbar, Responsive Theme Viewer, I was though not able to get it to look right with these columns for the 800x1280 & the 980x1280 test view of that Firefox tool.  Any idea why?  The @media queries I used, which were all of them, didn't seem to affect this one.  Otherwise it looks correct for the other widths in the test toolbar.

I ended up making the height adjustings on div#text-4.widget and div#text-5.widget which are each on the top of each column.

Thanks,

CK

[David Chu]

My pleasure, Kitten. 😉
I use Firefox and Firebug, but I've never tried the Firefox Responsive Theme Viewer, so I can't comment on that. Maybe I'll take a look at that sometime.

I probably would have just put in my code change at, say, iPad portrait size, and then re-sized my browser to test it. 🙂 Of course, your way will work, too.

My designer friend had this site where there were bordered boxes EVERYWHERE! 🙂 And these had to interact with the sidebars, and you don't even want to know. No two boxes had the same amount of content! Yet, she wanted equal heights for all of them, and for them to look OK with sidebars of various colors and heights. The box borders really made this tough. She comes from the print world, and is used to mega-precision, which the web doesn't have at all. So I ended up making jQuery routines to make height adjustments for any box, and any amount of content. It definitely packed some more time into the project. 🙂

Have a pleasant weekend,
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[computerkitten]

Hi Dave!

I think I have it looking good across the platforms... switched over to the Genesis responsive viewer at http://www.studiopress.com/responsive/.  Then made the adjustments.  Wow... learned a lot today that is for sure and took your advice and dropped the font size down for a few of the platforms.  Things look even.  Keep fingers crossed!

I can't imagine working on a project such as yours with so many boxes... yikes.  It will definitely be kept in find for the future to try to avoid that kind of feature for a site.  But you never know what a client wants, that is for sure.  Ha!

Have a great weekend and thank you so much again as it really helped me a lot today!

CK

[David Chu]

CK,
That sounds great, and I'm glad it helped. Right, the site I described above came out great, but it was hard work. At least I got some extra jQuery tricks into my bag. A case of be careful what you ask for.

I'm seeing a huge increase in questions about the header not being responsive. Somebody maybe could make a cottage industry out of fixing those. There is Nick's super cool Responsive Header Plugin, that goes a long way towards addressing this. But many people want even more changes than that can offer (or they don't know how to edit an image to a particular size if they're newbies), so if they don't have CSS skills, they're in for some grief.

No theme, no matter how hugely Themeforest-y admin-ed out it is, can anticipate every tiny little thing. So there's a measure of job security for us. 🙂

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Author]

Posts