Jump to content


Photo
- - - - -

White space at bottom of big screens

Started by jkskovgaard , Mar 01 2013 06:32 PM

Best Answer bluecloud , 19 March 2013 - 01:42 PM

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>
Go to the full post


  • Please log in to reply
32 replies to this topic

#1 jkskovgaard

jkskovgaard

    Advanced Member

  • Members
  • 48 posts
  • Country: Country Flag

Posted 01 March 2013 - 06:32 PM

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:

Please Login or Register to see this Hidden Content


#2 catrina

catrina

    Advocate

  • Moderators
  • 12,345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 01 March 2013 - 08:14 PM

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


#3 Guido

Guido

    Advanced Member

  • Members
  • 35 posts
  • Country: Country Flag

Posted 02 March 2013 - 12:16 PM

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.


#4 jkskovgaard

jkskovgaard

    Advanced Member

  • Members
  • 48 posts
  • Country: Country Flag

Posted 02 March 2013 - 03:24 PM

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:

 

Please Login or Register to see this Hidden Content

 

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?


#5 Rob

Rob

    One Smart Egg

  • Moderators
  • 9,441 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 02 March 2013 - 04:21 PM

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

Please Login or Register to see this Hidden Content

(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).


#6 jkskovgaard

jkskovgaard

    Advanced Member

  • Members
  • 48 posts
  • Country: Country Flag

Posted 02 March 2013 - 07:16 PM

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!


#7 Danny

Danny

    Ninja

  • Moderators
  • 7,529 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 03 March 2013 - 08:35 AM

Hi,


If you wish to use a sticky footer, see the example here by Bootstrap and use the CSS as a template for you own.

 

Please Login or Register to see this Hidden Content


#8 jkskovgaard

jkskovgaard

    Advanced Member

  • Members
  • 48 posts
  • Country: Country Flag

Posted 03 March 2013 - 02:04 PM

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.


#9 Rob

Rob

    One Smart Egg

  • Moderators
  • 9,441 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 03 March 2013 - 03:14 PM

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


#10 jkskovgaard

jkskovgaard

    Advanced Member

  • Members
  • 48 posts
  • Country: Country Flag

Posted 03 March 2013 - 04:10 PM

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). :

 

 

Please Login or Register to see this Hidden Content


#11 Rob

Rob

    One Smart Egg

  • Moderators
  • 9,441 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 03 March 2013 - 04:15 PM

Great news!

 

If you can screenshot the color settings for your background colors I may be able to provide some guidance.


#12 jkskovgaard

jkskovgaard

    Advanced Member

  • Members
  • 48 posts
  • Country: Country Flag

Posted 03 March 2013 - 10:34 PM

Sure, Rob, here you go:

Please Login or Register to see this Hidden Content

 

 

But don't you think we should be looking somewhere else? I'm trying to make the min-height of the content area 100%.

 

 

 

Cheers!


#13 Danny

Danny

    Ninja

  • Moderators
  • 7,529 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 04 March 2013 - 07:23 AM

Hi,

 

Has this been resolved as I am unable to see any issue ?


#14 jkskovgaard

jkskovgaard

    Advanced Member

  • Members
  • 48 posts
  • Country: Country Flag

Posted 04 March 2013 - 03:33 PM

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:

 

Please Login or Register to see this Hidden Content

 

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


#15 Rob

Rob

    One Smart Egg

  • Moderators
  • 9,441 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 04 March 2013 - 10:15 PM

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.

Please Login or Register to see this Hidden Content

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

Please Login or Register to see this Hidden Content

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.


#16 jkskovgaard

jkskovgaard

    Advanced Member

  • Members
  • 48 posts
  • Country: Country Flag

Posted 05 March 2013 - 11:33 AM

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

 

Please Login or Register to see this Hidden Content

 

 

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 :)


#17 Danny

Danny

    Ninja

  • Moderators
  • 7,529 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 05 March 2013 - 12:36 PM

Try this, it should fix the issue.

 

Please Login or Register to see this Hidden Content


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


#18 jkskovgaard

jkskovgaard

    Advanced Member

  • Members
  • 48 posts
  • Country: Country Flag

Posted 05 March 2013 - 11:42 PM

Hi Danny, tanks for getting back on this, but we are way past the background tiling issue! :)

 

The issue I still need your help resolving, is how to make the content area stretch all the way to the bottom of the page, even with little or no content. Please have a look at the example I've given, it's the content area with a white background that I'm talking about.

 

Please Login or Register to see this Hidden Content

 

I really do appreciate your help, but things would move faster if you'd care to read into the thread! Just the very last post at least. Thanks.

 

 

Cheers!


#19 James B

James B

    Advocate

  • Moderators
  • 2,470 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 06 March 2013 - 03:01 AM

Hi there,

 

Yeah i can't get this to work either, I'll ask the core team and see what they say. I would image its due to the fact that if you remove the static px height and put in a %, that % works off the containers that item is inside. If none of them have been given a set height to follow then it's like '100% of what??" so it just stays as it is.

 

However, just for info and in response to your earlier question to Rob, you can turn the scrollbars off using

 

Please Login or Register to see this Hidden Content


#20 jkskovgaard

jkskovgaard

    Advanced Member

  • Members
  • 48 posts
  • Country: Country Flag

Posted 06 March 2013 - 06:14 AM

Hi James! Great, really hope somebody can figure this out. I'll cross my fingers and wait for the core team.

 

About the scrollbar thing, thank you, but that wouldn't work if I had content taller than the 1000px somewhere else on the site.


Back to Technical Support


  1. PageLines Forums
  2. → PageLines Framework
  3. → Technical Support
  4. Privacy Policy
Click to return to top of page in style!