Jump to content
jkskovgaard

White space at bottom of big screens

Recommended Posts

jkskovgaard    0
jkskovgaard

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
Guido    1
Guido

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
jkskovgaard    0
jkskovgaard

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
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jkskovgaard    0
jkskovgaard

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
jkskovgaard    0
jkskovgaard

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
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jkskovgaard    0
jkskovgaard

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
Rob    547
Rob

Great news!

 

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jkskovgaard    0
jkskovgaard

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
jkskovgaard    0
jkskovgaard

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jkskovgaard    0
jkskovgaard

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.

 

http://pressmoo.dk/Wordpress3/

 

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!

Share this post


Link to post
Share on other sites
James B    436
James B

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

 

body {
    overflow: hidden;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
jkskovgaard    0
jkskovgaard

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.

Share this post


Link to post
Share on other sites
Jenny    33
Jenny

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


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
jkskovgaard    0
jkskovgaard

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
Jenny    33
Jenny

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.


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
jkskovgaard    0
jkskovgaard

Ok, thank you Jenny - but do you understand what my trouble is? I'm trying to make the content area stretch all the way to the bottom of the screen. It doesn't do that unless you have content tall enough for it to do so.

 

Unlike the default 100% width setting it isn't possible to set a 100% height property, as far as I can see.

 

 

I think what you're talking about is the couple of pixels black space at the top and bottom that you'd normally get on a platformpro site. But if you look at my test-site I don't have that:

 

http://pressmoo.dk/Wordpress3/

Share this post


Link to post
Share on other sites
James B    436
James B

Just an update to let you know this has been emailed over to get some more info from the core team, haven't had a response to confirm yet, but people are having a look into it. As soon as I know abit more I'll let you know.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×