Archived

This topic is now archived and is closed to further replies.

  • 0

White space at bottom of big screens

Question

Posted · Report post

Hi!

 

How do I make the background tiling go all the way to the very bottom of the screen, whatever screens size?

 

I've added a tiled background image to my site, but on pages with little or no content, the tiling stops at some point. This means the background color shows at the bottom of the screen, especially on larger screens.

 

I'd like the tiling and the content background to continue to the very bottom.

 

(If you're on a small screen, try zooming out your browser and you willl see what I'm talking about).

 

 

Here's an example:

http://www.lietzen-ms.dk/

Share this post


Link to post
Share on other sites

34 answers to this question

Posted · Report post

Thank for the fix Mr. Powers! Just what I needed.

Although it wasn't working ok in first place. I made a few changes to make it work:

<script> /* <![CDATA[ */
!function ($) {
jQuery(document).ready(function() {
 
var myWindowHeight = $(window).height() // window height
,   mySelector = '.section-content-area > .texture > .content'
 
//  ^^ what you're setting to window height (play with this)
 
 
$(mySelector).css('min-height', myWindowHeight)  //<-- changed from myBodyHeight
 
// If you want to run this on browser window resize as well
$(window).resize(function() {
    
var myBodyHeight = $('body').height()
 
$(mySelector).css('min-height', myBodyHeight) // <-- changed from myWindowHeight
 
});
}) }(window.jQuery); /* ]]> */ </script>
2 people like this

Share this post


Link to post
Share on other sites

Posted · Report post

Tuesday Bump!

Share this post


Link to post
Share on other sites

Posted · Report post

Erhm... Mr. Powers, thank you for getting back to me here. But seriously? Javascript?

 

I replaced the Pagelines Theme with the naked Toolbox theme and set up a few css rules. ...And made the #content stretch to the bottom of the screen in like 5 seconds. Ok, minutes, but who's counting.

 

Please have a look:

http://pressmoo.dk/Wordpress3/

 

Obviously it's possible to call height:100% in CSS. The problem in Pagelines (I think) is that there are so many surrounding containers and that we'd have to set the height property in each and everyone.

 

But it should most definitly  be possible without Java I'm very sure??

 

 

Cheers,

Jens.

Share this post


Link to post
Share on other sites

Posted · Report post

Its most likely possible with CSS and CSS only, but like Andrew mentions above, its going to be very tricky due to the layout of PageLines Framework, if you wish to give this attempt with CSS, you're free to do so.

 

If you require some assistance, I recommend contacting one of our Pros. - http://www.pagelines.com/pros/

Share this post


Link to post
Share on other sites

Posted · Report post

Still one thing unresolved - and I think this is the one that Guido and a few others also wanted to know about:

 

Is it possible to have the content area stretch all the way to the bottom of the screen, even with little or no content (maintaining responsiveness)?

 

Example of default platformpro behavior:

 

http://pressmoo.dk/Wordpress3/

 

There's lot's of horizontal stretching going on, but no vertical.

Share this post


Link to post
Share on other sites

Posted · Report post

I don't see a tiled background image. Did you remove it?

Share this post


Link to post
Share on other sites

Posted · Report post

Alright, @James called me in on this one.. 

This is a particularly challenging problem in pure CSS as CSS doesn't allow 'height: 100%' in content based context. 

 

Therefore, i'm going to recommend adding a little bit of Javascript as a quick fix. 

 

Add this to your headerscripts option, and note that it is untested, but at least close to what you're looking for. (let us know if it doesn't work)

 

You may have to play with selectors, etc... It essentially get the window height, and sets something else to that height.

 

<script> /* <![CDATA[ */
!function ($) {
jQuery(document).ready(function() {

var myWindowHeight = $(window).height() // window height
,   mySelector = '.section-content-area > .texture > .content' 

//  ^^ what you're setting to window height (play with this)


$(mySelector).css('min-height', myBodyHeight)

// If you want to run this on browser window resize as well
$(window).resize(function() {
   
var myBodyHeight = $('body').height()

$(mySelector).css('min-height', myWindowHeight)

});
}) }(window.jQuery); /* ]]> */ </script>
1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Have Dm'd you. Still working on this. Will have an answer shortly, had to go further up the command chain to get more info :-)

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you James, hope they'll figure it out!

Share this post


Link to post
Share on other sites

Posted · Report post

I use this on my site (using PlatformPro), but it doesn't work on yours...

 

body #page-canvas {
    margin-bottom: -15px;
    margin-top: -5px;
}

 

Not sure why... but have a play around with it. :)

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you Jenny - don't see how setting a negative margin will solve the stretch to 100% height issue though?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi, this has to be one of the oddest things I've ever seen, but it may have to do with your layout (percent vs. pixels).

 

If you change the code below to include min-height : 100%; there's no change.

#content .content-pad {
    padding-top: 10px;
}

But.... If you do this, there's immediate change:

#content .content-pad {
    min-height: 1000px;
    padding-top: 10px;
}

I'll have to discuss this with the developers, but please let me know whether you have pixel or percentage selected for your layout.

 

Hope this helps.

Share this post


Link to post
Share on other sites

Posted · Report post

i am also interessted in this topic. It has something to to with a minimum-height setting somewhere in Pagelines - i guess the value is 400px. On a page with full width sections enabled and for example #footer { background: red } you will see a white space below the red footer section. This happens if you have only a few lines of content on that page which is less than e.g. 400px.

Share this post


Link to post
Share on other sites

Posted · Report post

Sorry I might have messed it up, working on the site while waiting for a reply. Ok, so, I've created a page that I'm not going to touch, explaining the issue. Here it is:

 

http://pressmoo.dk/Wordpress3/

 

I've removed header and footer. What you see is a simple page with a few lines of content.

 

Issues:

 

The tiled background (grey stuff from the MacBook Pro) doesn't go all the way to the bottom of the screen. There's a portion of black (the page background color) showing.

 

The content area (white background) doesn't go all the way to the bottom of the screen.

 

 

How can we make small, tiled background images go all the way to the bottom of all screen sizes, keeping everything responsive?

 

How can we make the page background color go all the way to the bottom of all screen sizes, keeping everything responsive?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

Please go to Dashboard > PageLines > Site Options > Layout Editor.  Do you have Full Width Sections selected under Site Design Mode?

 

It appears to be that you have an empty footer section there. Since the footer is customizable, you can just use CSS to add a background.  Please see www.epicurus.com (use Firebug for Firefox or Chrome's Inspection Tools) and scroll to the footer area.  You'll see how a background may be added to this area.

 

CSS will allow you to use both the background (tiled image) and the content (white).

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob!

 

I tried following your advice, adding a footer, adding the tiled background to the footer (although I'd prefer to just simply have the page background continue, not having to set the background image more than once).

 

This, alas, doesn't solve the problem: 

 

I still have a big empty space at the bottom of the screen, in this case black (body background color). It seems there's a min-height of 400px being set for the content somewehere by default. Would it be possible to somehow let that property be 100% instead of 400px (maintaining responsiveness)?

 

Also I'd like the page background (in this case white) to stretch all the way to the footer, or if I exclude a footer, to the very bottom of the screen.

 

 

Help much appreciated!

Share this post


Link to post
Share on other sites

Posted · Report post

On my site, it isn't a non-100% issue, it's a hidden padding/margin somewhere. The code above has worked on all of my PlatformPro sites to get rid of the extra spacing but I'm not sure why it isn't working on your site.

Share this post


Link to post
Share on other sites

Posted · Report post

I'll have some form of answer/update to this on Monday, will keep you posted

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Rob. I've got the default setting, which is pixel. Screenshot here:

 

http://pressmoo.dk/Wordpress3/wp-content/uploads/2013/03/Screen-Shot-2013-03-05-at-12.25.05-PM.png

 

 

I tried changing the setting to percent and then add the "min-height:100%" to #content .content-pad, but nothing happens. 

Your fix kinda works, but obviously only for screens that are less than 1000px vertically. And leaves me with a scrollbar, where one is not needed.

 

 

 

Hmmm, tricky one this... Help still much appreciated :)

Share this post


Link to post
Share on other sites

Posted · Report post

Try this, it should fix the issue.

 

#site {
background-image: url('http://www.lietzen-ms.dk/wp-content/uploads/2011/11/background.jpg');
background-position: 0% 0%;
background-repeat: repeat;
}


If it does, then remove the uploaded background image from your settings, as its no longer needed.

Share this post


Link to post
Share on other sites

Posted · Report post

bluecloud

 

Can you provide an example to set the maximum hight to say 400 px or 80%.

Problem with the above script is that drops the footer area below the viewport

Share this post


Link to post
Share on other sites

Posted · Report post

Ok, great Danny, but that's not what I need. I'd like for the tiled background to stretch all the way down to the bottom of the page, not using a footer. And the page background color to go all the way down to the bottom, regardless of the visitors screen size.

 

Should be possible?

 

A fixed-height footer, as shown in the Bootstrap-example, wouldn't solve the problem as it is fixed-height. I'd have to make it like 3000 px high and (theoretically) someone might still be on a larger screen. Besides, then I'd have to make up content for the footer.

Share this post


Link to post
Share on other sites

Posted · Report post

How did you add the background?  Can you screenshot any settings or CSS used?

Share this post


Link to post
Share on other sites

Posted · Report post

Rob, I added the tiled background in Site Options > Color Control > Site Background Image.

 

Seems I have figured it out though (the tiled body background issue, not the page color issue). :

 

 

html {
    background-image: url(tiled-background-image.gif); background-repeat: repeat;
}
 

Share this post


Link to post
Share on other sites