Jump to content
Sign in to follow this  
Followers 0
thomaswilson90

Scale Page to fit Window Height

By thomaswilson90, in DMS & Legacy Products

Recommended Posts

thomaswilson90    0

thomaswilson90
Posted

Hi,

I'm customizing my pagelines template and I want to scale a page to fit into the window height on the browser window it is currently being displayed in. I want to get rid of the scrollbar.

Page I want to scale: www.bored-studios.com

What I want it to do:

Currently the page has 10px padding at the top and a 10px margin below the footer (I want to keep this). But on my work laptop, 15inch screen, the scroll bar appears as the page is slightly too long to view without it. Yet on my home laptop, 18inch, it is too short to fill the whole height of the window.

1. So when it is too long and a scrollbar is displayed I actually want the page to resize so that it fits the window height but no more, 100% window height not 110% window height.

2. When it is too short I want the page to center in the window. I have tried this but with no luck.

I've tried everything I can think of but I cannot solve point 1 or 2. I hope I've explained what I want to do so that you understand where I'm coming from. It's like the responsive layout for width but for height instead.

Any help is appreciated,

Tom

Share this post

Link to post
Share on other sites

catrina    103

catrina
Posted

The page can't be resized to fit the browser window according to what computer/device the visitor is using. Since so many people are using browsers in different window sizes on devices with different screen sizes, there isn't much selective control you have over whether the scrollbar shows up or not. The visitor would need to zoom out in the browser window for the page to fit if it is too big or zoom in if the page is too small. I think the best solution would be to pick two or three similar screen heights and work around those sizes.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post

Link to post
Share on other sites

thomaswilson90    0

thomaswilson90
Posted

Yea I was thinking about working with a 15inch screen height and then centering if the screen was any bigger. Is there a way to center the page on the screen then? I've tried changing the css to vertical-align the page but with no luck. Any thoughts on how to center the entire page in respect to the window size?

Share this post

Link to post
Share on other sites

thomaswilson90    0

thomaswilson90
Posted

I'm going to keep it like it is for now.

For anyone interested:

100% of browser windows are 600px or more. So if you wanted to set the height of the page to 600px and then use one of the above alignment options (follow link) then it would mean the page contents would not have to be scrolled on any computer browsers.

Share this post

Link to post
Share on other sites

Rob    547

Rob
Posted

The topic was marked as resolved.

Former PageLines Moderator, Food Expert and Raconteur

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
Sign in to follow this  
Followers 0
Go To Topic Listing DMS & Legacy Products

  • Similar Content

    • janpeeters
      Anything Boxes And Polylang Language Filtering Problem
      By janpeeters
      Over the last month I had extensive communications with the developer of the (premium) Anything Boxes section (in Pagelines store) (Adam Munns) and the developer of the WP Polylang Multilingual plugin (Frederic Demarle).
       
      This was because the following problem occurred:
      Anything Boxes showed all posts of two languages (Dutch and English) on the respective static frontpages for each language. It should of course have filtered posts for Dutch language on the Dutch frontpage and English on the English frontpage.
       
      The solution to this problem was simple in the end. When duplicating a page for use in another language the settings for Anything Boxes were not copied to the new page and I should have set these settings manually again on the new page. I wasn't aware of this, but it makes sense. Because of this the pages didn't know how to differentiate between posts from different languages.
       
      The dev of Polylang told me that Polylang is currently smart enough to synchronize metas like Featured images and page templates but it does not work out of the box with metas created by plugins and themes but (according to Frederic) it is rather easy to add them in the list using the filter 'pll_copy_post_metas'.
      He mentions that he is not sure that these 'PageLines Meta Settings' are stored in post meta but that would make sense according to him. He asks if the Pagelines dev team will be interested to support this feature in the future.
       
      I'm also wondering if you will consider adding Polylang translation support for manually editable strings like the 'Read more…' strings in Pagelines Settings.
       
      Well that's of course up to you but I thought to let you know to be able to take this into consideration. I also post this for other users in case they experience the same kind of trouble and are looking for an answer.
       
      Best regards,
      Jan Peeters
    • bankrollbuilder
      Header In Banner Alignment
      By bankrollbuilder
      I used a custom hook to put a banner ad in my header. It works but its not in the right position. it is centered and above my logo and I would like to float it to the right of my logo in the header. heres the link: http://shaboopie.com/shaboopie-wp/free-logos-pg1/

      thanks.

      Dan B.
    • starlit
      2 Hero Units
      By starlit
      Can one have two hero sections on one page?

      I want a landing page which leads/advertises two subpages.

      Or is there another option?

      Please help.

      THANK YOU
    • hutruk
      Tabs Do Not Align Horizontally
      By hutruk
      Hi!

      I am using the shortcodes for tabs, as described in the documentation.

      When I insert the following code:


      [pl_tabs][pl_tabtitlesection type="tabs"] [pl_tabtitle number="1"]Title 1[/pl_tabtitle] [pl_tabtitle number="2"]Title 2[/pl_tabtitle] [/pl_tabtitlesection] [pl_tabcontentsection] [pl_tabcontent active="yes" number="1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit [/pl_tabcontent] [pl_tabcontent number="2"] Lorem ipsum dolor sit amet, consectetur adipiscing elit [/pl_tabcontent] [/pl_tabcontentsection] [/pl_tabs]

      I get a strange output (in the attachment).

      Any ideas?

      Thanks in advance!

    • MooiWeb
      Alignment Qtranslate With Breadcrumbs
      By MooiWeb
      Hello,

      I would like to align my qtranslate with my breadcrumb so that the flags are on the same hight.
      I'm aware of putting a code in the custom css and tryed severall codes from your site but for now, no succes

      The site i'm working on is http://nieuw.vazdias.nl

      Thx,
      Edwin



×