Making all page lengths fit with footer

Hello folks,
Soooo hey I thought I had this figured out (with your help) from a prior thread but the css I had on my other site does not work on my new one.

I want to make the footer stay below the main page body .

I'm using Divi2 a childtheme of it and the page builder to make the pages.

If you look at the main page its basically how I want it length wise ie I dont want the page to scroll. http://campaignwebsolutions.com/style4/

And when you try the donate page http://campaignwebsolutions.com/style4/donate/ you can see with the form on it theres a problem with the page length if I use the shortcode for the form in the default editor. If I use the page builder to put it in a text widget theres still a problem.

Any ideas? Thanks
Joe

  • Michelle Shull

    Hey there, Joe!

    Do you mind turning on the form for visitors? Right now I'm just seeing a blank template on that page, and a message that the form is for logged in users only.

    The front page looks a little different for me, since I've got a bigger monitor with more pixels. What's the smallest monitor size (in px) you want your site to fit on without scrolling, so I can make sure my CSS is on point here. :slight_smile: I see since you're using a lot of exact pixel measurements here, you're not wanting the site to be responsive for different desktop monitor sizes, correct?

    Thanks, Joe!

  • Michelle Shull

    Hey Joe!

    Here's some helper CSS to get things in order. The heights on the main content areas were a bit off, so I tweaked things back into place like so:

    #main-content {
    min-height: 2250px;
    }

    The #main-content settings are currently a bit off, so if you can search through your custom CSS to find where you added these and remove those in bold, that's going to help as well.

    #main-content {
    height: 52px;
    margin-bottom: -19px;
    margin-top: -16px;
    box-shadow: none;
    background-color: rgba(255,255,255,1) !important;
    padding-bottom: 0px;
    min-height: 1187px;
    margin-left: -28px;
    padding-left: 28px;
    padding-top: 15px;
    max-height: 39px;
    }

    You can also combine the paddings and margins like so:

    padding: 15px 0 0 28px;
    
    margin: -16px 0 -19px -28px;

    So it's just two lines, instead of six. Remember it's like a clock, numbers represent top, right, bottom, and left, in that order. :slight_smile:

    Hope this helps, Joe!

  • Michelle Shull

    Hi, Joe!

    I'm trying really hard to keep up with your posts, Joe. Like last weekend, I've bumped you up in priority above everyone else currently in my queue. So you have my full attention until this is solved and the rest of the members I'm trying to help will be put on hold until your problem is completely solved. Since I'm assuming Elegant Themes doesn't do any support for Divi, I won't sign off for the night until you're happy with our service. I do have another front line shift tomorrow afternoon, but hopefully we can get it fixed before then.

    I was on the front line, as I'm required by my schedule, when your reply at 7:32PM EST came in, which was one hour past. I'm sorry if that delay was unacceptable to you, but I'm required to fulfill those hours, no matter what kind of critical emergencies are happening in the back feed.

    I'm not sure if you need to remove your footer CSS. If it broke the page we're working on now, then yes, we should probably pull it and work on fixing the other broken elements. You need to clean up the #main-content CSS like I posted above. If the length I added doesn't work for each page, we can try some different things. The donate form is an iFrame, so we've got to work around it, it's not going to adjust for us no matter what we do to it, so we need to adjust everything around it.

    You've got a lot of custom CSS that's conflicting, like in the code I posted above. Do you remember where you got the CSS code to set the minimum height larger than the maximum height, for example? Was there a particular motivation for that?

    Please do let me know if this clears things up.

  • Michelle Shull

    Hi, Joe!

    The issue in that particular page is that the main content area is set to be shorter than your iFrame. To make a fix that only applies to that page is going to take an extra step here, but it should be simple. Try this:

    #post-137.post-137 #main-content {
    min-height: 2550px;
    }

    Here's the thing, though. If you're using this as a template, the post ID number may not necessarily be the same across all your sites, so you'll need to check and make sure it works regardless of which URL it's on. Trust me and write this down on a post it and stick it on your fridge. "Dear Joe - check the ID number of the Donate page on each new site. Regards, Michelle."

    Now, this may not fix it 100%, but I know which areas may (or hopefully may not) cause an issue once you make the edits, so we can jump right back in again.

    Thanks, Joe!

  • Michelle Shull

    Okidokie, let's try it this way:

    body.page.page-id-137 #main-content {
    min-height: 2550px;
    }

    If that's not it, try it stripped down, with the selector like so:

    .page-id-137 #main-content

    And if that's still not it, toss in an !important after 2550px and before the closing semi-colon.

    If that still doesn't get it, report back in, after throwing some salt over your shoulder, b/c we're gonna need the extra good mojo there. :slight_smile:

    Thanks, Joe!

  • jsegal

    Wow what an awesome effort thanks Michelle.

    I think I'll save what I got and then play around with your settings to see what happens.
    Because I'd really like to be able to have the footer just appear below pages of varying sizes but as a work around I set the footer as fixed and well, it's basically got the site working.
    The longer pages just scroll behind the footer which I think is okay dont you?

    All this started out as my attempt to build a "simple" site. :slight_smile:

    Have a relaxing evening and weekend Michelle and sorry if I came off unappreciative or frantic, was just frustrated.

    All the best,
    Joe

  • Michelle Shull

    No worries Joe, I completely understand frustration. I was a bit short, too, and I'm sorry. It's a busy weekend, and I want to make sure I get to everyone I can so we can get our response times up.

    I'm happy to help if you find anything else that needs a fixin'! I'm subscribed to this thread, so I'll get an email when you reply. I'll hop back in as soon as I'm able to do so.

    I'm off to leap tall CoursePress pages in a single bound. :slight_smile:

  • jsegal

    1. What screen resolution do you suggest designing the site for in general @Michelle Shull?
    I'm at 1360x768 which I understand is a widely used desktop resolution.

    2. Have you experimented with CSS Hero yet like you mentioned you planned to do?

    They have a new product called CSS-Inspector I'm going to Beta test which lets you modify more of the css specifics and add entries manually.

    I am still struggling to get the main-content area to be full length regardless of what content is on it to expand with the content etc.

    Joe

  • Michelle Shull

    Hey there, Joe!

    I'm not sure we've got the capabilities on our end to do a screenshare, but I'm so sorry your theme is giving you such fits. Let me try to address your questions here.

    1. Responsive design is about designing for every screen size at the same time. You'll normally see responsive CSS expressed in percentages, rather than in pixels, so it scales between screen sizes. 1260 px is going to take up 1260 px no matter what device or screen you're viewing a site on, where as an element that takes up 30% of your screen width is always going to take up just 30% of the visible area, regardless of screensize. I learned CSS basics a while ago, it's still hard for me sometimes to wrap my head around responsive design, I'm still used to a grid of pixels and I remember when 800px x 600px was the most common screen size.
    2. I haven't played with CSS Hero as much as I'd like to yet, but I have spent some time with it. I like it a lot, I'm sticking it in my bag of recommended plugins. I've tested it with a few themes in my library that have really terrible CSS and even worse standards, and it works with all of them so far. That's a great tool. The mobile emulator is great, I'm used to the one that comes with Chrome's dev tools, and the CSS hero emulator is much better. Chrome's great with Apple products, but some of the Android models wouldn't load properly, they load fine in CSS Hero.

    3. I've been doing some research. This all began with the donate form, which is in an iframe, which makes it a tricky bugger to work with. But, I remembered a tutorial I read that may help us here: http://www.smashingmagazine.com/2014/02/27/making-embedded-content-work-in-responsive-design/

    If we can get that iframe to be responsive, then we can rely on the original theme CSS to handle all your pages for you (responsively) so, if luck is on our side here we can pull this all together simply.

    The link above has two key points.
    1. You need to wrap the iframe in div tags. Did you drop an embed code into a page to create Donate? If so, edit the page, use text mode (not visual) and add this before the embed code starts:

    <div class="donate.container">

    and this after it's done:

    </div>

    The example in the link is for a video iframe, but the same theory applies for your form iframe, as well.

    Hope this makes it work, Joe!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.