Jump to content

Archived

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

Tanja_L

White space at bottom at high resolutions

Recommended Posts

Tanja_L    0
Tanja_L

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
greenfly    230
greenfly

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

 

move to Framework forum. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


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

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;
}
  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Tanja_L    0
Tanja_L

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
greenfly    230
greenfly

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Tanja_L    0
Tanja_L

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
greenfly    230
greenfly

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

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.


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Tanja_L    0
Tanja_L

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
James B    436
James B

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


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

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
greenfly    230
greenfly

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
Tanja_L    0
Tanja_L

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

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
Simon    247
Simon

just set a min-height on the content div.

Share this post


Link to post
Share on other sites
Tanja_L    0
Tanja_L

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

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
Simon    247
Simon

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

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

Thanks for informing us the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×