• 0

White space at bottom at high resolutions

Question

Posted · Report post

Hi

 

I have a problem with big screens. When the screen resolution is high there is some white space at the bottom. I want the background image to fill whole space AND the blue/grey background to do the same. Just like on this 1366px*768px screen: http://i.gyazo.com/dfbebc87a7bce99a48ef8fb22dd1a9ab_1.png

 

I could solve this by adding some line breaks or so, but I don't want the content to take up more space than 100% of the height (I don't want scroll bars, when it's not necessary).

 

Following screenshots are taken from a iMac 27" (2013) - but it also appears at fx a screen with Full HD:

(Maybe you need to download the images to see them in full size)

https://www.dropbox.com/s/5pn5wjbhzbgi2n9/FF_1.png

https://www.dropbox.com/s/zal91zt00xmg9e7/FF_2.png

https://www.dropbox.com/s/hrqfk59nmeakzjj/FF_3.png

https://www.dropbox.com/s/ls1rbar7r2psyy2/FF_4.png

 

The front page looks fine (I think it's because the content take up all space): https://www.dropbox.com/s/bg23yd671r53kz8/FF_front%20page%202.png

 

The site is www.sågørdetdog.dk - if you have problems with the danish letters, then please use: www.bit.ly/RywmSi

Share this post


Link to post
Share on other sites

21 answers to this question

  • 0

Posted · Report post

Well how high are the windows?

 

.page-canvas{ min-height: 1000px }

 

if you want to change it depending on whatever person is using it then you are going to have to do some kind of complicated media queries.

 

I found out! The thing is, that you have to put the content's background-color at .page-canvas and the background-image at the body element. I have written some CSS: http://pastebin.com/5b5XaGJ6

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Site is PageLines Framework 2.4.4 (http://whatwpthemeisthat.com/)

 

move to Framework forum. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Site is PageLines Framework 2.4.4 (http://whatwpthemeisthat.com/)

 

move to Framework forum. 

 

Ooh sorry, I'm new at Pagelines.

 

Can someone please help me out?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The problem as far as I can tell (I don't have a iMac) is that your image is set to no-repeat. If you add the following code, can you tell me if this resolves your issue.

 

#site .page-canvas {
background-size: cover;
}
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No, that did not help. If it was that easy I could have done it myself. The thing is that the HTML element is not 100% of the browser height when you see the site at big resolutions. I don't have access to a Full HD screen or so (it is my client who has the iMac) but if you test with a simulator, you can see that the HTML element does not take up all space and because of that does your code not help. See this image: http://i.gyazo.com/dd1bc56927b327418ae3fe71d441e44c_1.png

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi @Tanja_L 

 

looking at the site on 27" iMac - resolution 2560 x 1440 the site shows as follows http://screencast.com/t/R7HMRbzT

 

I can replicate the white space you mention only when i zoom out of the page (in any browser) 

 

So at 100% the site looks like the above but zoomed out to 90% shows as follows http://screencast.com/t/D8R9K1Cb4i

 

See if your client has zoom set in their browser. (cmd & -) 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi @Tanja_L 

 

looking at the site on 27" iMac - resolution 2560 x 1440 the site shows as follows http://screencast.com/t/R7HMRbzT

 

I can replicate the white space you mention only when i zoom out of the page (in any browser) 

 

So at 100% the site looks like the above but zoomed out to 90% shows as follows http://screencast.com/t/D8R9K1Cb4i

 

See if your client has zoom set in their browser. (cmd & -) 

 

Hi Martin

 

As said the front page looks fine - it's the other pages that troubles (I should definitely have expressed me better ;-))

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@tanja_L 

 

No, not at all, my bad.. I wandered in half way through like a child wanders into a movie wanting to know the story.. 

Having another look at this for you.;.. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

could you create an admin logon for your site and send us the credentials to hello @ pagelines dot com please? 

 

We need you to include a link to this topic for reference.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

could you create an admin logon for your site and send us the credentials to hello @ pagelines dot com please? 

 

We need you to include a link to this topic for reference.

 

Done.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, I've checked our inbox but can't see anything come in from the email address listed in your profile. If this is still outstanding can you please re-send

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, I've checked our inbox but can't see anything come in from the email address listed in your profile. If this is still outstanding can you please re-send

 

Oooh sorry. The sender is peter  @  webintas dot dk

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Got it?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi - nothing seems to landed in the inbox just yet. 

 

Make sure you are sending to hello @ PageLines dot com. (but obviously in the form of an email address ;) ) 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi - nothing seems to landed in the inbox just yet. 
 
Make sure you are sending to hello @ PageLines dot com. (but obviously in the form of an email address ;) )


what about now? It should have been sent both from peter @ webintas dot dk AND pstidsen @ hotmail dot com

please let me know if you have got it.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, can we please move on a bit further? I know you've been off for weekend, but I hope we can get this solved in this week.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

just set a min-height on the content div.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

What should I set it at? And what content div do you mean? I do not want the page to be larger than the windows if it isn't necessary.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Can you please help me out? I do not think it is fair that I have to wait over 10 days for this (relatively) simple question! Can you at least confirm, that you have got access to the admin area?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Well how high are the windows?

 

.page-canvas{ min-height: 1000px }

 

if you want to change it depending on whatever person is using it then you are going to have to do some kind of complicated media queries.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for informing us the issue has been resolved.

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