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

Community Forums Forums Design Tips and Tricks As I reduce the window viewing site, columns on Home don't line up

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  David Chu 1 year, 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #33289

    computerkitten
    Participant
    Post count: 102

    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

    #33347

    David Chu
    Participant
    Post count: 1426

    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:

    [css]
    .home-middle .widget {
    min-height: 400px;
    }
    [/css]

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

    Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    #33360

    computerkitten
    Participant
    Post count: 102

    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 800×1280 & the 980×1280 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

    #33362

    David Chu
    Participant
    Post count: 1426

    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

    #33368

    computerkitten
    Participant
    Post count: 102

    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

    #33462

    David Chu
    Participant
    Post count: 1426

    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

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

You must be logged in to reply to this topic.