Jump to content


Photo
- - - - -

Remove Large Whitespace On Pages With Little Content

background image whitespace

Best Answer dharmagate , 30 December 2012 - 12:51 AM

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.

Go to the full post


  • Please log in to reply
4 replies to this topic

#1 dharmagate

dharmagate

    Advanced Member

  • Members
  • 65 posts
  • Framework Version:2.3.1
  • Country: Country Flag

Posted 17 December 2012 - 08:04 PM

Pagelines Drag & Drop looks great with this website I made: 

Please Login or Register to see this Hidden Content

 

However, I am having a problem with my background image not repeating properly on pages with very little content as seen here:

Please Login or Register to see this Hidden Content

 

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



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 17 December 2012 - 08:13 PM

That white space is coming from this selector:

Please Login or Register to see this Hidden Content

 

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



#3 dharmagate

dharmagate

    Advanced Member

  • Members
  • 65 posts
  • Framework Version:2.3.1
  • Country: Country Flag

Posted 26 December 2012 - 06:47 PM

Catrina,

 

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

 

Please Login or Register to see this Hidden Content



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 26 December 2012 - 09:19 PM

You added this:

Please Login or Register to see this Hidden Content

 

But you left this:

Please Login or Register to see this Hidden Content

 

What you need is this:

Please Login or Register to see this Hidden Content

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.



#5 dharmagate

dharmagate

    Advanced Member

  • Members
  • 65 posts
  • Framework Version:2.3.1
  • Country: Country Flag

Posted 30 December 2012 - 12:51 AM   Best Answer

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.







Also tagged with one or more of these keywords: background image, whitespace