Jump to content


Photo
- - - - -

White space at bottom at high resolutions


Best Answer Tanja_L , 27 May 2014 - 06:26 AM

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

Go to the full post


  • Please log in to reply
21 replies to this topic

#1 Tanja_L

Tanja_L

    Member

  • Members

  • 29 posts
  • Framework Version:newest pro -version
  • Country: Country Flag

Posted 10 May 2014 - 08:20 PM

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: 

Please Login or Register to see this Hidden Content

 

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)

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

 

The front page looks fine (I think it's because the content take up all space):

Please Login or Register to see this Hidden Content

 

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



#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 10 May 2014 - 09:32 PM

Site is PageLines Framework 2.4.4 (

Please Login or Register to see this Hidden Content

)

 

move to Framework forum. 



#3 Tanja_L

Tanja_L

    Member

  • Members

  • 29 posts
  • Framework Version:newest pro -version
  • Country: Country Flag

Posted 10 May 2014 - 10:49 PM

Site is PageLines Framework 2.4.4 (

Please Login or Register to see this Hidden Content

)

 

move to Framework forum. 

 

Ooh sorry, I'm new at Pagelines.

 

Can someone please help me out?



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 11 May 2014 - 09:08 AM

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;
}

  • batman likes this

#5 Tanja_L

Tanja_L

    Member

  • Members

  • 29 posts
  • Framework Version:newest pro -version
  • Country: Country Flag

Posted 11 May 2014 - 04:22 PM

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: 

Please Login or Register to see this Hidden Content



#6 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 12 May 2014 - 01:29 PM

Hi @Tanja_L 

 

looking at the site on 27" iMac - resolution 2560 x 1440 the site shows as follows 

Please Login or Register to see this Hidden Content

 

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 

Please Login or Register to see this Hidden Content

 

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



#7 Tanja_L

Tanja_L

    Member

  • Members

  • 29 posts
  • Framework Version:newest pro -version
  • Country: Country Flag

Posted 12 May 2014 - 03:02 PM

Hi @Tanja_L 

 

looking at the site on 27" iMac - resolution 2560 x 1440 the site shows as follows 

Please Login or Register to see this Hidden Content

 

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 

Please Login or Register to see this Hidden Content

 

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



#8 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 12 May 2014 - 04:05 PM

@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.;.. 



#9 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 12 May 2014 - 04:10 PM

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.



#10 Tanja_L

Tanja_L

    Member

  • Members

  • 29 posts
  • Framework Version:newest pro -version
  • Country: Country Flag

Posted 12 May 2014 - 04:34 PM

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.



#11 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 13 May 2014 - 07:06 AM

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



#12 Tanja_L

Tanja_L

    Member

  • Members

  • 29 posts
  • Framework Version:newest pro -version
  • Country: Country Flag

Posted 13 May 2014 - 07:28 AM

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



#13 Tanja_L

Tanja_L

    Member

  • Members

  • 29 posts
  • Framework Version:newest pro -version
  • Country: Country Flag

Posted 14 May 2014 - 09:00 AM

Got it?



#14 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 14 May 2014 - 10:25 PM

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



#15 Tanja_L

Tanja_L

    Member

  • Members

  • 29 posts
  • Framework Version:newest pro -version
  • Country: Country Flag

Posted 15 May 2014 - 04:38 AM

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.

#16 Tanja_L

Tanja_L

    Member

  • Members

  • 29 posts
  • Framework Version:newest pro -version
  • Country: Country Flag

Posted 18 May 2014 - 08:25 PM

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.



#17 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 18 May 2014 - 08:57 PM

just set a min-height on the content div.



#18 Tanja_L

Tanja_L

    Member

  • Members

  • 29 posts
  • Framework Version:newest pro -version
  • Country: Country Flag

Posted 18 May 2014 - 09:15 PM

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.



#19 Tanja_L

Tanja_L

    Member

  • Members

  • 29 posts
  • Framework Version:newest pro -version
  • Country: Country Flag

Posted 21 May 2014 - 05:51 PM

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?



#20 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 21 May 2014 - 06:54 PM

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.