Jump to content
dharmagate

Remove Large Whitespace On Pages With Little Content

Recommended Posts

dharmagate    1
dharmagate

Pagelines Drag & Drop looks great with this website I made:  http://sakyongmedia.com

 

However, I am having a problem with my background image not repeating properly on pages with very little content as seen here: http://www.sakyongmedia.com/daily-contemplation-december-17th-2012/

 

Can anyone offer advice how to remedy this problem?  Thank you for your assistance.

Share this post


Link to post
Share on other sites
catrina    103
catrina

That white space is coming from this selector:

#site #page #dynamic-content

 

There's a minimum height for it that needs to be lowered (to perhaps 200px).


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

Catrina,

 

Thanks for the reply.  I added the code below to my CSS section, but nothing changed.  Did I do it wrong?

 

#site #page #dynamic-content {
  height: 200px !important;
}

Share this post


Link to post
Share on other sites
Rob    547
Rob

You added this:

#site #page #dynamic-content {
    height: 200px !important;
}

 

But you left this:

#site #page, #site #dynamic-content {
    min-height: 400px;
}

 

What you need is this:

#site #page, #site #dynamic-content {
    min-height: 240px;
}

I don't recommend using the height command, but instead, the min-height command  as height is legacy to CSS1, while min-height is CSS2 and later. Height does work, but needs help like the !important operator, which is not a good thing, as it's not recognized by all browsers.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
dharmagate    1
dharmagate

Rob,

 

 

#site #page, #site #dynamic-content {     min-height: 100px; }

 

 

That was it! Thank you for explaining about min-height.  I was not aware of that.  I guess that means I should use min-height instead from here on out.  I appreciate the heads up.

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


  • Similar Content

    • SaschaM
      By SaschaM+
      Hello,
      sorry. i got a problem on my site i can not fix myself, would be nice somebody can help.
      I use:
      - Platform 5 (latest) Pro
      - Pagelines Framework (latest for Platform 5)
      - keycdn (cdn enabler, cache enabler und optimus WebP)
      - my site:  example
      Problem:
      The background image i use in the Impulse Section is not beeing replaced automatically if i specify a CDN Url. I need to put in the cdn url to the image manually. Why?
      If you look in the button of the the side you see post grid section, where i have no problems. You also see there WebP Images working.
      Now i can not really use the direct cdn url for the impulse background image, cause i want to benefit there from WebP Image also in the background as it works in post grid section.
      How does it works with Impulse? The webP image for the background is ready to use.
      Thank you.
       
       
       
       
       
       
       
       
    • crose
      By crose+
      Hi,
      I am using the Canvas Area section at the top of my site. I have a video playing in the background, which works really well on desktop. But on mobile video doesn't play without user interaction, so I have a static image in place as an alternate image. However when viewed on a mobile device there is now a play button over the static image that does nothing. This didn't use to happen so I imaging it is due to an upgrade. But this is really bad UX. Is there a way to remove it?
      Here is the site:
      http://gator4088.hostgator.com/~asif/
      Thanks in advance.
      Chuck
    • jeomiland
      By jeomiland+
      Hi
      Have a couple clients who are having background image issues. This should be a basic question so hope fix is easy. How do you get a specified image to auto resize so it fills the browser screen? Client has portrait-format image that's 1000x1000 and the left and right are displaying the background color (white) on my 1440 wide Macbook pro, as it is on client's computer. She has tried clicking "Fit image to page" and repeat background - neither is getting what she expects.  I suggested trying a landscape-format image.
      But the larger question is this - how does one plan a proper background image that will fill the whole screen - left to right - in the browser image and have it scale appropriately?  Should one always have landscape background images? What about scrolling vs not scrolling BG? How plan your BG image so it will fill the screen on laptops, ipads, iphones...  both in landscape and portrait format? Is it true that you can't do it? that either the left-right or top-bottom are cut off depending on the device and orientation?
      2 sites where this needs resolution:
      http://cassclayton.com/dev/
      http://chirecovery.com/
      Thanks!
      JE
    • hibbsy78
      By hibbsy78+
      Mobile layout much better in 5.0.3. There appears to be an issue that it 'super-sizes' the background image?
      http://www.johnhibbs.me


    • dawsonbarber
      By dawsonbarber+
      Under PageLines > Settings, it looks like the actual setting for the background image tile size is missing.
×